React Menu Tree

Highly customizable and simple tab menu tree component

Installation

Install the library using your favorite dependency manager:

  npm install react-menu-tree --save

Or using yarn:

  yarn add react-menu-tree

Usage/Examples

import React, { useEffect, useState } from "react";
import { MenuTree, nodeClickHandler } from "react-menu-tree";

function App() {
  const [rows, setRows] = useState([]);

  const data = [
    {
      name: "Edna Ray",
      children: [
        { name: "Jim Spencer" },
        {
          name: "Lee Carter",
        },
        {
          name: "Frankie Santiago",
          children: [
            {
              name: "Oscar Hicks",
            },
            {
              name: "Willis Warren",
            },
          ],
        },
        {
          name: "Philip Massey",
        },
      ],
    },
    {
      name: "Jennifer Mason",
    },
    {
      name: "Jimmie Potter",
      children: [
        {
          name: "Isabel Blake",
        },
        { name: "Daryl Banks" },
      ],
    },
    {
      name: "Claudia Moore",
    },
  ];

  const CustomNodeComponent = ({ rowNumber, nodeData, activeNodeIndex }) => {
    return (
      <div
        onClick={() => {
          setRows((oldData) => {
            return nodeClickHandler({
              rowNumber,
              nodeData,
              activeNodeIndex,
              rowData: oldData,
            });
          });
        }}
        style={{
          padding: "10px",
          borderBottom: nodeData?.isNodeActive ? "1px solid red" : "none",
        }}
        key={"row-node-" + activeNodeIndex}
      >
        {nodeData?.name}
      </div>
    );
  };

  // for first time data mount in the component 
  useEffect(() => {
    setRows((oldData) => {
      return nodeClickHandler({
        rowNumber: -1,
        nodeData: { children: data },
        activeNodeIndex: 0,
        rowData: oldData,
      });
    });
  }, []);

  return (
    <div className="App">
      <MenuTree rows={rows} CustomNodeComponent={CustomNodeComponent} />
    </div>
  );
}

export default App;

API Reference

CustomNodeComponent

make your custom node component, you will get some necessary details in props

| Parameter | Type | Description | | :-------- | :------- | :------------------------- | | nodeData | { isNodeActive: boolean } | from nodeData prop we will get isNodeActive status also will other details which are defined in data | | rowNumber | number | clicked row number | | activeNodeIndex | number | this active node index will give the index of clicked node |