Simple, high-performance react component for d3 org chart
npm install @fx2000/react-org-chart-nextThis is a fork of @keymastervn/react-org-chart-next that has been customized to fit our needs since the original package appears to be abandoned.
It can be deprecated or private-used by the owner or the organization owner.
``
import * as OrgChart from '@fx2000/react-org-chart-next'
...
render() {
return
}
`
- 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
| 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": [] } | |Number
| nodeWidth | | Width of the component for each individual (Optional) | 180 |Number
| nodeHeight | | Height of the component for each individual (Optional) | 100 |Number
| nodeSpacing | | Spacing between each of the nodes in the chart (Optional) | 12 |Number
| animationDuration | | Duration of the animations in milliseconds (Optional) | 350 |String
| lineType | | Type of line that connects the nodes to each other (Optional) | “angle” “curve” |String
| className | | Define the classes for the root element (Optional) | “rc-chart” |Object` | Define styling for the root element (Optional) | { cursor: "move", height: "100%", width: "100%" } |
| style |