awesome-react-org-chart
TypeScript icon, indicating that this package has built-in type declarations

1.4.11 • Public • Published

Awesome React Org Chart 👥

npm version

Supports large organization charts with multiple compaction/packing techniques to improve readability and accessibility.

Example

import OrgChart from "awesome-react-org-chart";
 
<OrgChart
  // required
  root={nodes[0]}
  isValidNode={this.isValidNode}
  keyGetter={this.keyGetter}
  renderNode={this.renderNode}
  childNodesGetter={this.childNodesGetter}
  // optional (but recommended)
  lineHorizontalStyle={this.lineHorizontalStyle}
  lineVerticalStyle={this.lineVerticalStyle}
  // optional
  measureStrategy="effect"
  connectorThickness={2}
  connectorAlignment={ConnectorAlignment.Center}
  isAssistantGetter={this.isAssistantGetter} // wip
  layout={layout}
  containerStyle={this.containerStyle}
  renderNodeContainer={this.renderNodeContainer}
  renderNodeLine={this.renderNodeLine}
  debug={debug}
/>;

Animation

The OrgChart uses transform3d to position items on the screen. CSS transitions along with some React/JavaScript can be used to make animations.

No React? Example!

The OrgChart does not need to use React. Please refer to the VanillaExample.ts file in the repo to learn more.

Credits

OrgChart by @romanpolunin

Package Sidebar

Install

npm i awesome-react-org-chart

Weekly Downloads

417

Version

1.4.11

License

MIT

Unpacked Size

229 kB

Total Files

90

Last publish

Collaborators

  • mathew-kurian