https://github.com/mathew-kurian/awesome-react-org-chart
Supports large organization charts with multiple compaction/packing techniques to improve readability and accessibility.
https://github.com/mathew-kurian/awesome-react-org-chart
List: awesome-react-org-chart
awesome chart map org org-chart orgchart relationship-map tree tree-graph
Last synced: 6 months ago
JSON representation
Supports large organization charts with multiple compaction/packing techniques to improve readability and accessibility.
- Host: GitHub
- URL: https://github.com/mathew-kurian/awesome-react-org-chart
- Owner: mathew-kurian
- Created: 2020-07-22T20:52:14.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-13T09:04:08.000Z (over 2 years ago)
- Last Synced: 2024-10-31T17:19:45.411Z (6 months ago)
- Topics: awesome, chart, map, org, org-chart, orgchart, relationship-map, tree, tree-graph
- Language: JavaScript
- Homepage: https://awesome-react-org-chart.vercel.app/example.html
- Size: 11.1 MB
- Stars: 32
- Watchers: 1
- Forks: 16
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Awesome React Org Chart 👥
[](https://badge.fury.io/js/awesome-react-org-chart)
Supports large organization charts with multiple compaction/packing techniques to improve readability and accessibility.
## [Example](https://awesome-react-org-chart.vercel.app/example.html)
```tsx
import OrgChart from "awesome-react-org-chart";
;
```
## 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!](https://awesome-react-org-chart.vercel.app/public/vanilla.html)
The OrgChart does not need to use React. Please refer to the `VanillaExample.ts` file in the repo to learn more.
## Credits
[OrgChart](https://github.com/romanpolunin/OrgChart) by [@romanpolunin](https://github.com/romanpolunin)