How to access Gantt API

You can use either of the two ways below to get access to the Gantt API:

• apply the init handler function with api as the parameter
• apply a React ref to store the api object in a variable (please, refer to the React useRef docs: https://react.dev/reference/react/useRef)

Apply the init handler

You can access Gantt API using the init handler function that takes api as the parameter.

The example below shows how to use the init function and output to the console the current zoom level by listening to the zoom-scale action with the help of the api.on() method and getting the state of the zoom level via the api.getState() method.

Example:

import { getData } from "../data";
import { Gantt } from "@svar-ui/react-gantt";

const data = getData();

const init = (api) => {
  api.on("zoom-scale", () => {
    console.log("The current zoom level is", api.getState().zoom);
  });
};

export default function App() {
  return (
    <>
      <h4>Point over Gantt chart, then hold Ctrl and use mouse wheel to zoom</h4>
      <Gantt init={init} tasks={data.tasks} links={data.links} zoom />
    </>
  );
}

Bind to api

You can access Gantt API via the api gateway object.

In the example below we get access to the Gantt api via a ref and pass the api variable with the kept Gantt api to the Toolbar:

import { useRef } from "react";
import { getData } from "./common/data";
import { Gantt, Toolbar } from "@svar-ui/react-gantt";

const data = getData();

export default function App() {
  // apiRef.current will contain the Gantt API instance after mount
  const apiRef = useRef(null);

  return (
    <>
      <Toolbar api={apiRef.current} />
      <Gantt tasks={data.tasks} ref={apiRef} />
    </>
  );
}

Note: apiRef.current will be populated after the Gantt component mounts. Toolbar should handle a null/undefined api until the reference is assigned.

api methods

• api.detach()
• api.exec()
• api.getReactiveState()
• api.getState()
• api.getStores()
• api.getTask(id)
• api.intercept()
• api.on()
• api.setNext()

See each method description in the next sections.