https://github.com/sibiraj-s/use-checkbox-tree

React hook for checkbox tree component
https://github.com/sibiraj-s/use-checkbox-tree

checkbox-tree react react-hooks

Last synced: 22 days ago
JSON representation

React hook for checkbox tree component

• Host: GitHub
• URL: https://github.com/sibiraj-s/use-checkbox-tree
• Owner: sibiraj-s
• License: mit
• Created: 2022-09-02T08:24:00.000Z (about 2 years ago)
• Default Branch: master
• Last Pushed: 2024-09-26T02:13:29.000Z (about 2 months ago)
• Last Synced: 2024-10-19T19:55:06.351Z (24 days ago)
• Topics: checkbox-tree, react, react-hooks
• Language: TypeScript
• Homepage: https://sibiraj-s.github.io/use-checkbox-tree/
• Size: 1.22 MB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# use-checkbox-tree

> React hook for checkbox tree component

[![Tests](https://github.com/sibiraj-s/use-checkbox-tree/actions/workflows/tests.yml/badge.svg)](https://github.com/sibiraj-s/use-checkbox-tree/actions/workflows/tests.yml)

[![Version](https://badgen.net/npm/v/use-checkbox-tree)](https://npmjs.com/use-checkbox-tree)

[![License](https://badgen.net/npm/license/use-checkbox-tree)](https://github.com/sibiraj-s/use-checkbox-tree/blob/master/LICENSE)

## Installation

```bash

npm i use-checkbox-tree

```

## Usage

```jsx

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

    


  );

};


const root = ReactDOM.createRoot(document.getElementById('root'));

root.render();

```

### Return values

- checked - array of selected node ids

- selectNode - a function to select node

- deSelectNode - a function to deselect node

```js

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`

```js

Map{

  1: "indeterminate",

  1.1: true,

  1.2: false

}

```