use-checkbox-tree

use-checkbox-tree

React hook for checkbox tree component

Installation

npm i use-checkbox-tree

Usage

import 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 />);

Return values

• 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
}

Changelog

v0.2.0 (2023-07-03)

Breaking Changes

• checbox state is now a map to preserve original id type (fd2792c)

Bug Fixes

• fix inconsistent indeterminate parent state (2210636)

Internal

• cleanup useCheckboxTree hook (46efc30)
• add storybook (60fa213)
• migrate to vitest from jest (d94cdd8)
• configure publint (7759890)
• add npm package provenance (1f871fc)