Project Title

hammad-react-folders-tree

Installation

Install my-project with npm

npm i hammad-react-folders-tree

Features

• no dependencies
• very minimal size
• Responsive (you can give columns to show how you should divide your tree)
• Toggle between tree and checkbox tree (if you dont want check box functionality then simply pass allowCheck={false} now you have only tree) -You can also change the icons (you can use react-icons or anyother package) -you can add spacing both horizontal and vertical
• you can do custom styling the size of your whole tree with only one prop (customStyling)
• you can delete the node by passing allowDelete to true
• you can add the new node by passing allowAdd to true -you can get the path of the node e.g "/app/http/providers/index.js" -you can click on single node aswell and get its information -By default our tree uses 4 keys in object (value,text,id,status,nodes) but you can pass your own key and value aswell. your keys and value will not interfere our tree -tree is capable of supporting a large number of nodes at once.

Usage/Examples

import Component from "my-project";
import React, { useState } from "react";

import TreeView from "hammad-react-folders-tree";
const nodes = [
  {
    value: "animals",
    text: "Animals",
    id: 1,
    status: false,
    nodes: [
      {
        value: "mammals",
        text: "Mammals",
        status: false,
        id: 2,
        nodes: [
          {
            value: "cat",
            text: "Cat",
            status: false,
            nodes: [],
            id: 3,
          },
          {
            value: "dog",
            text: "Dog",
            status: false,
            nodes: [],
            id: 4,
          },
        ],
      },
    ],
  },
  {
    value: "plants",
    text: <h1>Plants</h1>,
    status: true,
    nodes: [],
    id: 5,
  },
];
function App() {
  const [Nodes, setNodes] = useState(nodes);
  const [expanded, setExpanded] = useState([]);
  const handleExpand = (newArray) => {
    console.log("handleExpand", newArray);
    setExpanded([...newArray]);
  };
  const handleCheck = (treeNodes) => {
    console.log("handleCheck", treeNodes);
    setNodes([...treeNodes]);
  };
  const handeleSave = (chklist) => {
    console.log("handeleSave", chklist);
  };
  return (
    <TreeView
      filternodes={Nodes}
      expanded={expanded}
      handleExpand={handleExpand}
      changeState={handleCheck}
    />
  );
}