React hook for checkbox tree component
npm i use-checkbox-treeimport ReactDOM from 'react-dom'; import useCheckboxTree from 'use-checkbox-tree'; const nodes = [ { id: 1, children: [ { id: 1.1, }, { id: 1.2, }, ], }, ]; const initialValue = []; const TreeComponent = () => { const { checked, indeterminates, state, selectNode } = useCheckboxTree(nodes, initialValue); // checked -> [1.2] // indeterminates -> [1] // state.get(1) -> 'indeterminate' return ( // iterate through nodes and create your own tree view <div /> ); }; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<TreeComponent />);- checked - array of selected node ids
- selectNode - a function to select node
- deSelectNode - a function to deselect node
selectNode(1); // select a node deSelectNode(1); // deselect a node selectNode(1, true); // select a node selectNode(1, false); // deselect a node-
clear - a function to clear all selected items
-
state - object with id as key and value as
boolean | indeterminate
Map{ 1: "indeterminate", 1.1: true, 1.2: false }