react-tree-checkbox

A lighweight but complete react checkbox tree

Installation

Install react-tree-checkbox with npm

1  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

1import React, { useState } from "react";
2import TreeView from "react-tree-checkbox";
3const nodes = [
4  {
5    value: "animals",
6    text: "Animals",
7    id: 1,
8    status: false,
9    nodes: [
10      {
11        value: "mammals",
12        text: "Mammals",
13        status: false,
14        id: 2,
15        nodes: [
16          {
17            value: "cat",
18            text: "Cat",
19            status: false,
20            nodes: [],
21            id: 3,
22          },
23          {
24            value: "dog",
25            text: "Dog",
26            status: false,
27            nodes: [],
28            id: 4,
29          },
30        ],
31      },
32    ],
33  },
34  {
35    value: "plants",
36    text: <h1>Plants</h1>,
37    status: true,
38    nodes: [],
39    id: 5,
40  },
41];
42export default function App() {
43  const [Nodes, setNodes] = useState(nodes);
44  const [expanded, setExpanded] = useState([]);
45  const handleExpand = (newArray) => {
46    console.log("handleExpand", newArray);
47    setExpanded([...newArray]);
48  };
49  const handleCheck = (treeNodes) => {
50    console.log("handleCheck", treeNodes);
51    setNodes([...treeNodes]);
52  };
53  const handeleSave = (chklist) => {
54    console.log("handeleSave", chklist);
55  };
56  return (
57    <TreeView
58      filternodes={Nodes}
59      expanded={expanded}
60      handleExpand={handleExpand}
61      changeState={handleCheck}
62    />
63  );
64}

Properties

Property	type	Default	options	Description
filternodes	array	[]		in this prop you will pass array of object
expanded	array	[]		in this prop you will pass array of id's which you want to expand initialiy
handleExpand	function			in this prop you will pass a call back function which return the array of id's which are expanded
changeState	function			in this prop you will pass a call back function which return latest nodes
column	number	12	1 to 12	divide your tree in columns. this prop will only apply on first level of nodes. this is just like bootstrap grid system
onNodeClick	function			if you want to click on single node and want to get data of single node then use this prop. it need callback function. it will give you an object which contains two keys "path" and "node"
onNodeClickOptions	object	{ allowExpand: false, key: "text", delimiter: "/"}		options to set on onNodeClick function
customStyling	object	{}		pass css styling to give style to your tree
horizontalSpacing	string	"23px"		add spacing between each node horizontally
verticalSpacing	string	"0px"		add spacing between each node vertically
borderLeft	string	"none"		adds border to each node
allowCheck	boolean	true	true or false	if you dont want the checkbox functionality then pass false
allowDelete	boolean	true	true or false	if you want to delete node. after deleteing the node you will get the latest noded in changeState function
allowAdd	boolean	true	true or false	if you want to add new node.
addText	string	"Add New Node"		if you want to change the text.
ref	reference			pass reference
icons	object			if you want to change the icons

icons Properties

Property
compressIcon
expandIcon
nodeCompressIcon
nodeExpandIcon
nonNodeIcon
deleteIcon
addIcon

nodes Properties

Property	Description
text	any string
value	any string
status	boolean true or false
id	must b unique id
nodes	pass empty array if you dont want children

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