react-tree-structure

A simple, customizable React component for rendering tree structures.

Installation

Install the package via npm:

npm install react-tree-structure

Example

example json format

  const data = [
    {
      "id": "1",
      "name": "Root Node",
      "org_unit_list": [
        {
          "id": "1-1",
          "name": "Child Node 1",
          "org_unit_list": [
            {
              "id": "1-1-1",
              "name": "Grandchild Node 1-1",
              "org_unit_list": []
            }
          ]
        },
        {
          "id": "1-2",
          "name": "Child Node 2",
          "org_unit_list": []
        }
      ]
    }
  ]

import React from 'react'
import Tree from 'react-tree-structure';

function OrgTree() {
  const handleNodeClick = (node) => {
    console.log('Node clicked:', node);
  };

  return (
    <Tree 
     data={data} 
     onClick={handleNodeClick}
     className="tree-node" 
     nameKey = 'name' 
     childrenKey = 'org_unit_list'
    />
  );
}

export default OrgTree;