Skip to main content

api.getReactiveState()

Description​

Gets the state object with the reactive properties of Gantt

This method allows you to subscribe to the returned properties in the same way as actions.

Usage​

api.getReactiveState(): object;

Returns​

The method returns an object with the following reactive properties:

{
    tasks,
    links,
    start,
    columns,
    end,
    lengthUnit,
    cellWidth,
    cellHeight,
    scaleHeight,
    scales,
    taskTypes,
    zoom,
    selected,
    activeTask,
    baselines,
}

Example​

In the example below we subscribe to the selected property in order to show toolbar buttons for the selected task:

import React, { useState, useEffect, useRef } from "react";
import { getData } from "./common/data";
import { Gantt, Toolbar } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";
import { Button } from "wx-react-wx";

const MyComponent = () => {
  const data = getData();

  const apiRef = useRef();
  const [selected, setSelected] = useState();

  useEffect(() => {
    if (apiRef.current) {
      setSelected(apiRef.current.getReactiveState().selected);
    }
  }, [apiRef.current]);

  const handleDelete = () => {
    if (apiRef.current) {
      apiRef.current.exec("delete-task", { id: selected });
    }
  };

  // other settings

  return (
    <>
      <Toolbar>
        {selected && (
          <Button onClick={handleDelete}>Delete task</Button>
          // other settings
        )}
      </Toolbar>

      <Gantt
        ref={apiRef}
        tasks={data.tasks}
        // other settings
      />
    </>
  );
};

export default MyComponent;

Related articles: