Usage no npm install needed!

<script type="module">
  import ctrlReactOrgchart from 'https://cdn.skypack.dev/@ctrl/react-orgchart';
</script>

README

@ctrl/react-orgchart

React wrapper around a d3 v6 based org chart.

This is based on smartprocure/react-org-chart which itself is also a fork. This fork has been updated to use d3 v6 and expose typescript types.

DEMO: https://ctrl-react-orgchart.vercel.app

Install

npm install @ctrl/react-orgchart

Use

import { OrgChart } from '@ctrl/react-orgchart';

<OrgChart tree={tree} />;

Sample tree data

{
  id: 1,
  entity: {
    id: 1,
    // base 64 image
    avatar: 'data:image/jpeg;base64,/9j....',
    name: 'Jane Doe',
    title: 'IT',
  },
  children: [
    {
      id: 2,
      entity: {
        id: 2,
        // svg example
        avatar: '<svg></svg>',
        name: 'John Foo',
        title: 'CTO',
      },
      children: [],
    },
  ],
}