react-tree-checkbox

A lighweight but complete react checkbox tree

Installation

Install react-tree-checkbox with npm

  npm i react-tree-checkbox

Features

This project have following 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.

Demo

please watch the demo to learn how you can take full advantage from this package it is very powerful but light package that includes both tree and checkbox functionality video Note:(video is not ready yet) you can test my package from this link testing

Fake json data for testing

Link

Usage/Examples

import React, { useState } from "react";
import TreeView from "react-tree-checkbox";
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,
  },
];
export default 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}
    />
  );
}

Properties

icons Properties

nodes Properties

Hi, I'm Arslan Ahmed Shaad! 👋

🚀 About Me

I'm a full stack developer...

Feedback

If you have any feedback, please reach out to us at ashi3610@gmail.com

Authors

• @Arslan Ahmed Shaad
• @Danish