Caprica Software

React Org Chart Tutorial

Installation

Use yarn or npm to install from the standard npm repository.


yarn

yarn add @capricasoftware/react-org-chart

npm

npm install @capricasoftware/react-org-chart

Imports

import OrgChart from '@capricasoftware/react-org-chart'

Only the OrgChart component itself is imported, the other provided components are sub-components of that chart component.

ExampleChart.tsx
import OrgChart from '@capricasoftware/react-org-chart'

const ExampleChart = () =>
<OrgChart>
<OrgChart.Node>
<OrgChart.Adjunct/>
...
</OrgChart.Node>
</OrgChart>

Stylesheets

The component provides a default stylesheet that is automatically included. This provides the necessary structural/layout styles and a basic theme for the chart appearance. You are encouraged to override these styles in your application as you see fit.