# clickable-react-checkbox-tree > modification to react checkbox tree project to recognize click events. Latest version **1.0.2** (published 2018-03-27) · MIT license · 0 weekly downloads ## Install ```sh npm install clickable-react-checkbox-tree pnpm add clickable-react-checkbox-tree yarn add clickable-react-checkbox-tree bun add clickable-react-checkbox-tree ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.2 | | Published | 2018-03-27 | | First published | 2018-03-27 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 4 | | Unpacked size | 232 KB | | Known vulnerabilities | 0 (+4 in 1 direct dependencies) | | Install scripts | no | | GitHub stars | 0 | | Author | Jake Zatecky[ Original author ], Vikram | | Maintainers | vikrammaiya | | Keywords | react, checkbox, tree | ## Links - npm: https://www.npmjs.com/package/clickable-react-checkbox-tree - Repository: https://github.com/VikramMaiya/modified-react-checkbox-tree - Homepage: https://jakezatecky.github.io/react-checkbox-tree - Issues: https://github.com/VikramMaiya/modified-react-checkbox-tree/issues - npm.io page: https://npm.io/package/clickable-react-checkbox-tree ## Dependencies (4) - [lodash](https://npm.io/package/lodash.md) ^4.17.4 - [nanoid](https://npm.io/package/nanoid.md) ^1.0.1 - [classnames](https://npm.io/package/classnames.md) ^2.2.5 - [prop-types](https://npm.io/package/prop-types.md) ^15.5.8 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.0.2 (latest) — 2018-03-27 ## README # react-checkbox-tree [![npm](https://img.shields.io/npm/v/react-checkbox-tree.svg?style=flat-square)](https://www.npmjs.com/package/react-checkbox-tree) [![Build Status](https://img.shields.io/travis/jakezatecky/react-checkbox-tree/master.svg?style=flat-square)](https://travis-ci.org/jakezatecky/react-checkbox-tree) [![Dependency Status](https://img.shields.io/david/jakezatecky/react-checkbox-tree.svg?style=flat-square)](https://david-dm.org/jakezatecky/react-checkbox-tree) [![devDependency Status](https://david-dm.org/jakezatecky/react-checkbox-tree/dev-status.svg?style=flat-square)](https://david-dm.org/jakezatecky/react-checkbox-tree?type=dev) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://raw.githubusercontent.com/jakezatecky/react-checkbox-tree/master/LICENSE.txt) > A simple and elegant checkbox tree for React. ![Demo](demo.gif) ## Usage ### Installation Install the library using your favorite dependency manager: ``` shell yarn add react-checkbox-tree ``` Using npm: ``` npm install react-checkbox-tree --save ``` > **Note** – This library makes use of [Font Awesome](http://fontawesome.io/) styles and expects them to be loaded in the browser. ### Include CSS For your convenience, the library's styles can be consumed utilizing one of the following files: * `node_modules/react-checkbox-tree/lib/react-checkbox-tree.css` * `node_modules/react-checkbox-tree/src/less/react-checkbox-tree.less` * `node_modules/react-checkbox-tree/src/scss/react-checkbox-tree.scss` Either include one of these files in your stylesheets or utilize a CSS loader: ``` javascript import 'react-checkbox-tree/lib/react-checkbox-tree.css'; ``` ### Render Component A quick usage example is included below. Note that the react-checkbox-tree component is [controlled](https://facebook.github.io/react/docs/forms.html#controlled-components). In other words, it is stateless. You must update its `checked` and `expanded` properties whenever a change occurs. ``` javascript import React from 'react'; import CheckboxTree from 'react-checkbox-tree'; const nodes = [{ value: 'mars', label: 'Mars', children: [ { value: 'phobos', label: 'Phobos' }, { value: 'deimos', label: 'Deimos' }, ], }]; class Widget extends React.Component { constructor() { super(); this.state = { checked: [], expanded: [], }; } render() { return ( this.setState({ checked })} onExpand={expanded => this.setState({ expanded })} /> ); } } ``` All node objects **must** have a unique `value`. This value is serialized into the `checked` and `expanded` arrays and is also used for performance optimizations. ### Properties | Property | Type | Description | Default | | ------------------ | -------- | ------------------------------------------------------------------------------------------------ | ----------- | | `nodes` | array | **Required**. Specifies the tree nodes and their children. | | | `checked` | array | An array of checked node values. | `[]` | | `disabled` | bool | If true, the component will be disabled and nodes cannot be checked. | `false` | | `expandDisabled` | bool | If true, the ability to expand nodes will be disabled. | `false` | | `expanded` | array | An array of expanded node values. | `[]` | | `name` | string | Optional name for the hidden `` element. | `undefined` | | `nameAsArray` | bool | If true, the hidden `` will encode its values as an array rather than a joined string. | `false` | | `noCascade` | bool | If true, toggling a parent node will **not** cascade its check state to its children. | `false` | | `optimisticToggle` | bool | If true, toggling a partially-checked node will select all children. If false, it will deselect. | `true` | | `showNodeIcon` | bool | If true, each node will show a parent or leaf icon. | `true` | | `onCheck` | function | onCheck handler: `function(checked) {}` | `() => {}` | | `onExpand` | function | onExpand handler: `function(expanded) {}` | `() => {}` | #### Node Properties Individual nodes within the `nodes` property can have the following structure: | Property | Type | Description | | ----------- | ------ | ------------------------------------ | | `label` | mixed | **Required**. The node's label. | | `value` | mixed | **Required**. The node's value. | | `children` | array | An array of child nodes. | | `className` | string | A className to add to the node. | | `disabled` | bool | Whether the node should be disabled. | | `icon` | mixed | A custom icon for the node. | --- _Source: https://npm.io/package/clickable-react-checkbox-tree · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._