A lightweight but complete react tree with checkbox functionality
npm install react-tree-checkboxbash
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
`javascript
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: Plants
,
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 (
expanded={expanded}
handleExpand={handleExpand}
changeState={handleCheck}
/>
);
}
``