cf-hierarchy-chart

Made with create-react-library

Install

npm install --save cf-hierarchy-chart

Usage

import React, { useState } from 'react'

import { HierarchyChart } from 'cf-hierarchy-chart'
import 'cf-hierarchy-chart/dist/index.css'

const App = () => {
  const [familyTree, setFamilyTree] = useState({
    id: 1,
    label: "Arnold",
    collapsed: false,

    children: [
        {
            id: 102,
            label: 'Brenda',
            collapsed: true,
            children: [
                {
                    label: 'Bony',
                    id: 11,
                },
                {
                    id: 14,
                    label: 'Carlos',
                },
                {
                    label: 'Danny',
                    id: 9

                }
            ]
        },
        {
            label: 'Connie',
            id: 199
            ,
            children: [
                {
                    label: 'Bridget',
                    id: 8
                },
                {
                    label: 'Candice',
                    id: 7
                },
                {
                    label: 'Dolly',
                    id: 6
                }]
        },
        {

            id: 9298,
            label: 'Derrick',
            children: [
                {
                    label: 'Blake',
                    id: 4
                },
                {
                    label: 'Cassius',
                    id: 5
                },
            ]
        },
    ],
});

const template = (object) => {
  return (
      <>
          <div className="d-flex flex-column m-0 ">
              <img src="https://mdbcdn.b-cdn.net/img/new/avatars/5.webp" className="rounded-5 mx-auto" width="50px;"
                  alt="Avatar" />
              <label className=" mb-1 h-6">{object.label} {object.children?.length ? object.children?.length : 0}:1</label>
          </div>
      </>
  )

}


  return   <HierarchyChart
  data={familyTree}
  setData={setFamilyTree}
  template={template}
/>
}

export default App

License

MIT © Arnoldkhosa