@lozadaa/react-orgchart
v0.2.1
<img src="https://i.ibb.co/k9XP1Mr/image.png" width="700" height="300" />
0/weekUpdated 3 years agoMITUnpacked: 56.0 KB
Published by Richard A. Lozada
Organization Chart for nala-system
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. |
| pan | boolean | false | If true, the chart can be zoomed. |
| zoominLimit | number | 7 | User can zoom the chart at different scales(0.5~7). |
| zoomoutLimit | number | 0.5 | User can zoom the chart at different scales(0.5~7). |
Methods
| Name | Description |
|---|---|
| expandAllNodes | User can use this method to expand all the nodes. Sample code: orgchartRef.current.expandAllNodes() |
| expandAllNodes | User can use this method to export orgchart to png org pdf file. Sample code: orgchartRef.current.exportTo(filename, fileextension) |
Install
``
npm install @lozadaa/react-orgchart
Available Scripts
In the project directory, you can run:
$3
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
$3
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
$3
To generate dist folder before of run npm publish.