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
• use the useRef hook to store the api object in a variable (please, refer to 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 useRef 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() {
  const apiRef = useRef(null);

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

api methods

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

See each method description in the next sections.