Controls

The Controls component renders buttons that perform actions on the graph. This component must be used inside a parent component that displays the graph, or its corresponding provider.

function App() {
  const button1 = { action: () => alert('Button 1 clicked!'), icon: <div>Button 1</div> }
  const button2 = { action: () => alert('Button 2 clicked!'), icon: <div>Button 2</div> }
  return (
    <OrgChart data={data}>
      <Controls buttons={() => [button1, button2]}></Controls>
    </OrgChart>
  )
}

Props

ControlsProps

NameDescriptionType
buttons
A function specifying the buttons that are rendered by the Controls component.
ControlsButtonProvider
className?
The CSS class of the Controls component.
string
orientation?
The orientation of the Controls component.
”horizontal” | “vertical”
position?
The position of the Controls component.
Position | “custom”
renderControls?
An optional component used for rendering a custom Controls component.
ComponentType<RenderControlsProps>