OrgChartProvider

The OrgChartProvider component is a context provider, granting external access to the organization chart beyond the OrgChart component itself.

This functionality proves particularly valuable when there’s a toolbar or sidebar housing elements that require interaction with the organization chart. Examples would include buttons for zooming in and out or fitting the graph into the viewport.

The snippet below illustrates how to leverage the OrgChartProvider, enabling a component featuring both an OrgChart and a sidebar to utilize the useOrgChartContext hook.

function OrgChartWrapper() {
  const { fitContent, zoomToItem } = useOrgChartContext()

  return (
    <>
      <OrgChart data={data} contextMenuItems={(item: CustomOrgChartItem | null) => {
          if (item) {
            return [{ title: 'Zoom to Item', action: () => item && zoomToItem(item) }]
          }
          return []
        }}>
      </OrgChart>
      <Sidebar>
        <button onClick={fitContent}>Fit Content</button>
      </Sidebar>
    </>
  )
}

function OrganizationChart () {
  return (
    <OrgChartProvider>
      <OrgChartWrapper></OrgChartWrapper>
    </OrgChartProvider>
  )
}