react-org-chart-next
Note
This repository is an effort to make it work with es6 import.
It can be deprecated or private-used by the owner or the organization owner.
Usage
import * as OrgChart from '@keymastervn/react-org-chart-next'
...
<OrgChart tree={data} lineType="angle" style={{ cursor: move, height: '100%', width: '100%' }} />
Features
- High-performance D3-based SVG rendering
- Lazy-load children with a custom function
- Handle up to 1 million collapsed nodes and 5,000 expanded nodes
React Props
| property | type | description | example |
|---|---|---|---|
| tree | Object |
Nested data model with all of the employees in the company (Required) | { "id": 123, "person": { "name": "Fouad Matin" }, "children": [] } |
| nodeWidth | Number |
Width of the component for each individual (Optional) | 180 |
| nodeHeight | Number |
Height of the component for each individual (Optional) | 100 |
| nodeSpacing | Number |
Spacing between each of the nodes in the chart (Optional) | 12 |
| animationDuration | Number |
Duration of the animations in milliseconds (Optional) | 350 |
| lineType | String |
Type of line that connects the nodes to each other (Optional) | “angle” “curve” |
| className | String |
Define the classes for the root element (Optional) | “rc-chart” |
| style | Object |
Define styling for the root element (Optional) | { cursor: move, height: "100%", width: "100%" } |