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 the api as the parameter
• use useRef with api property

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 { useEffect, useRef } from "react";
import { getData } from "../data";
import { Gantt } from "wx-react-gantt";

const data = getData();

function App() {
  const apiRef = useRef(null);

  useEffect(() => {
    if (apiRef.current) {
      apiRef.current.on("zoom-scale", () => {
        console.log("The current zoom level is", apiRef.current.getState().zoom);
      });
    }
  }, [apiRef.current]);

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

export default App;

Bind to api

You can access Gantt API via the api gateway object. You should use the api property to fetch the reference to the api object.

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

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

function App() {
  const data = getData();

  const apiRef = useRef();

  return (
    <>
      <Toolbar api={apiRef.current} />

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

export default App;

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.