Skip to main content

registerEditorItem

Description​

Registers a custom UI component for use as a field in the Editor

It registers a custom React component to be used as an editor field (comp). The registered component must support the value property and onChange callback as in Editor.

Usage​

registerEditorItem?: (
  type: string,
  handler: Component<any>
) => void;

Parameters​

  • type - (required) a unique identifier for the editor control
  • control - a React component that implements value property and onChange callback as in Editor.

Example​

The example shows how to add a custom editor field using the radio button component:

import { Gantt, Editor, getEditorItems, registerEditorItem } from "@svar-ui/react-gantt";
import { RadioButtonGroup } from "@svar-ui/react-core";
import { useRef } from "react";

function MyGantt() {
  registerEditorItem("radio", RadioButtonGroup);

  const items = [
  ...getEditorItems,
  {
   key: "type",
   comp: "radio",
   label: "Type",
   options, // options for radio
   type: "inline",
  }
  ];

  const apiRef = useRef(null);

  return (
    <>
      <Gantt ref={apiRef} />
      <Editor api={apiRef.current} items={items} />
    </>
  );
}

export default MyGantt;

Related articles: