DEPRECATED: This project has reached the end of its development

Features

• expand/collapse nodes
• Allows user to change orgchart structure by drag/drop nodes
• Allows user to edit orgchart
• Supports exporting chart as a picture or pdf document
• Supports pan and zoom
• Allows user to customize the internal structure for every node

Props

Name	Type	Default	Description
chartClass	string		A css class to apply to the chart DOM node.
containerClass	string		Add an optional extra class name to .orgchart-container It could end up looking like class="orgchart-container xxx yyy".
collapsible	boolean	true	Allows expanding/collapsing the nodes.
datasource	object		datasource usded to build out structure of orgchart.
draggable	boolean	false	Allows dragging/dropping the nodes to the hierarchy of chart.
multipleSelect	boolean	false	If true, user can select multiple nodes by mouse clicking.
NodeTemplate	elementType		A Component that provides the node content Markup. This is a useful prop when you want to use your own styles and markup to create a custom orgchart node.
onClickChart	function		A callback fired when the orgchart is clicking.
onClickNode	function		A callback fired when the node is clicking.
pan	boolean	false	If true, the chart can be panned.
zoom	boolean	false	If true, the chart can be zoomed.
zoomAction	string		Will only work when zoom is set to true. Must be: 'decrement', 'increment', 'reset'

Methods

Name	Description
expandAllNodes	User can use this method to expand all the nodes. Sample code: orgchartRef.current.expandAllNodes()
exportTo	User can use this method to export orgchart to png org pdf file. Sample code: orgchartRef.current.exportTo(filename, fileextension)

Local Development

Clone this repository:

git clone [email protected]:trainual/react-orgchart.git

Install yalc:

Using NPM:

npm i yalc -g

Using Yarn:

yarn global add yalc

Setup publishing with yalc (within this repository):

yalc publish

Setup published version in Trainual:

yalc add @dabeng/[email protected]

Run watch to detect changes made upon save in this repository:

npm run watch

Notes:

• Restart vite server in Trainual after changes made from this repository (currently not setup to detect changes)
• yalc add ... will update Trainual's package.json to reference this repository from the .yalc directory - Please do not check this into git

Publishing

Prior to submitting a pull request, run npm run publish. This will update the dist/ to include your updated changes. Once your PR is approved and merged to master, if you are ready to publish a new version, use Github tags: https://github.com/trainual/react-orgchart/tags