Gathering detailed insights and metrics for react-checkbox-tree
Gathering detailed insights and metrics for react-checkbox-tree
Gathering detailed insights and metrics for react-checkbox-tree
Gathering detailed insights and metrics for react-checkbox-tree
react-checkbox-tree-enhanced
A simple, elegant, and enhanced checkbox tree for React.
react-tree-checkbox
A lightweight but complete react tree with checkbox functionality
react-native-checkbox-tree
A simple and elegant checkbox tree for React Native.
react-dropdown-tree-select
Lightweight, customizable and fast Dropdown Tree Select component for React
A simple and elegant checkbox tree for React.
npm install react-checkbox-tree
Typescript
Module System
Node Version
NPM Version
89.8
Supply Chain
98.3
Quality
75.7
Maintenance
100
Vulnerability
87.3
License
Updated on 03 Dec 2024
JavaScript (90.69%)
SCSS (4.53%)
Less (4.31%)
Shell (0.47%)
Cumulative downloads
Total Downloads
Last day
29.1%
Compared to previous day
Last week
-10.6%
Compared to previous week
Last month
4.8%
Compared to previous month
Last year
8.9%
Compared to previous year
4
1
39
A simple and elegant checkbox tree for React.
Install the library using your favorite dependency manager:
yarn add react-checkbox-tree
Using npm:
npm install react-checkbox-tree --save
Note – This library makes use of Font Awesome styles and expects them to be loaded in the browser.
Note – Although React 18 should work, our unit tests run against React 17 due to incompatibility with the unit testing tool (Enzyme).
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:
1import 'react-checkbox-tree/lib/react-checkbox-tree.css';
A quick usage example is included below. Note that the react-checkbox-tree component is controlled. In other words, you must update its checked
and expanded
properties whenever a change occurs.
1import React from 'react'; 2import CheckboxTree from 'react-checkbox-tree'; 3 4const nodes = [{ 5 value: 'mars', 6 label: 'Mars', 7 children: [ 8 { value: 'phobos', label: 'Phobos' }, 9 { value: 'deimos', label: 'Deimos' }, 10 ], 11}]; 12 13class Widget extends React.Component { 14 state = { 15 checked: [], 16 expanded: [], 17 }; 18 19 render() { 20 return ( 21 <CheckboxTree 22 nodes={nodes} 23 checked={this.state.checked} 24 expanded={this.state.expanded} 25 onCheck={checked => this.setState({ checked })} 26 onExpand={expanded => this.setState({ expanded })} 27 /> 28 ); 29 } 30}
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.
By default, react-checkbox-tree uses Font Awesome 4 for the various icons that appear in the tree. To utilize Font Awesome 5 icons, simply pass in iconsClass="fa5"
:
1<CheckboxTree 2 ... 3 iconsClass="fa5" 4/>
To change the rendered icons entirely, simply pass in the icons
property and override the defaults. Note that you can override as many or as little icons as you like:
1<CheckboxTree 2 ... 3 icons={{ 4 check: <span className="rct-icon rct-icon-check" />, 5 uncheck: <span className="rct-icon rct-icon-uncheck" />, 6 halfCheck: <span className="rct-icon rct-icon-half-check" />, 7 expandClose: <span className="rct-icon rct-icon-expand-close" />, 8 expandOpen: <span className="rct-icon rct-icon-expand-open" />, 9 expandAll: <span className="rct-icon rct-icon-expand-all" />, 10 collapseAll: <span className="rct-icon rct-icon-collapse-all" />, 11 parentClose: <span className="rct-icon rct-icon-parent-close" />, 12 parentOpen: <span className="rct-icon rct-icon-parent-open" />, 13 leaf: <span className="rct-icon rct-icon-leaf" />, 14 }} 15/>
If you are using the react-fontawesome
library, you can also directly substitute those icons:
1import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' 2 3... 4 5<CheckboxTree 6 ... 7 icons={{ 8 check: <FontAwesomeIcon className="rct-icon rct-icon-check" icon="check-square" />, 9 uncheck: <FontAwesomeIcon className="rct-icon rct-icon-uncheck" icon={['fas', 'square']} />, 10 halfCheck: <FontAwesomeIcon className="rct-icon rct-icon-half-check" icon="check-square" />, 11 expandClose: <FontAwesomeIcon className="rct-icon rct-icon-expand-close" icon="chevron-right" />, 12 expandOpen: <FontAwesomeIcon className="rct-icon rct-icon-expand-open" icon="chevron-down" />, 13 expandAll: <FontAwesomeIcon className="rct-icon rct-icon-expand-all" icon="plus-square" />, 14 collapseAll: <FontAwesomeIcon className="rct-icon rct-icon-collapse-all" icon="minus-square" />, 15 parentClose: <FontAwesomeIcon className="rct-icon rct-icon-parent-close" icon="folder" />, 16 parentOpen: <FontAwesomeIcon className="rct-icon rct-icon-parent-open" icon="folder-open" />, 17 leaf: <FontAwesomeIcon className="rct-icon rct-icon-leaf-close" icon="file" /> 18 }} 19/>
In addition to the CheckboxTree
component, additional utility functions are available to set the initial state of the tree.
expandNodesToLevel(nodes, targetLevel)
Creates a list of all parent node keys until targetLevel
.
Arguments:
nodes
(Array
): The same array of nodes passed into the main CheckboxTree
componenttargetLevel
(number
): The maximum expansion depth. Use Infinity
for maximum depth.Returns:
Array
: A list of node keys.Property | Type | Description | Default |
---|---|---|---|
nodes | array | Required. Specifies the tree nodes and their children. | |
checkModel | string | Specifies which checked nodes should be stored in the checked array. Accepts 'leaf' or 'all' . | 'leaf' |
checked | array | An array of checked node values. | [] |
direction | string | A string that specify whether the direction of the component is left-to-right ('ltr' ) or right-to-left ('rtl' ). | 'ltr' |
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 |
expandOnClick | bool | If true, nodes will be expanded by clicking on labels. Requires a non-empty onClick function. | false |
expanded | array | An array of expanded node values. | [] |
icons | object | An object containing the mappings for the various icons and their components. See Changing the Default Icons. | { ... } |
iconsClass | string | A string that specifies which icons class to utilize. Currently, 'fa4' and 'fa5' are supported. | 'fa4' |
id | string | A string to be used for the HTML ID of the rendered tree and its nodes. | null |
lang | object | An object containing the language mappings for the various text elements. | { ... } |
name | string | Optional name for the hidden <input> element. | undefined |
nameAsArray | bool | If true, the hidden <input> will encode its values as an array rather than a joined string. | false |
nativeCheckboxes | bool | If true, native browser checkboxes will be used instead of pseudo-checkbox icons. | false |
noCascade | bool | If true, toggling a parent node will not cascade its check state to its children. | false |
onlyLeafCheckboxes | bool | If true, checkboxes will only be shown for leaf nodes. | false |
optimisticToggle | bool | If true, toggling a partially-checked node will select all children. If false, it will deselect. | true |
showExpandAll | bool | If true, buttons for expanding and collapsing all parent nodes will appear in the tree. | false |
showNodeIcon | bool | If true, each node will show a parent or leaf icon. | true |
showNodeTitle | bool | If true, the label of each node will become the title of the resulting DOM node. Overridden by node.title . | false |
onCheck | function | onCheck handler: function(checked, targetNode) {} | () => {} |
onClick | function | onClick handler: function(targetNode) {} . If set, onClick will be called when a node's label has been clicked. | () => {} |
onExpand | function | onExpand handler: function(expanded, targetNode) {} | () => {} |
onCheck
and onExpand
Individual nodes within the nodes
property can have the following structure:
Property | Type | Description | Default |
---|---|---|---|
label | mixed | Required. The node's label. | |
value | mixed | Required. The node's value. | |
children | array | An array of child nodes. | null |
className | string | A className to add to the node. | null |
disabled | bool | Whether the node should be disabled. | false |
icon | mixed | A custom icon for the node. | null |
showCheckbox | bool | Whether the node should show a checkbox. | true |
title | string | A custom title attribute for the node. | null |
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
0 existing vulnerabilities detected
Reason
license file detected
Details
Reason
Found 4/23 approved changesets -- score normalized to 1
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Score
Last Scanned on 2024-12-02
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More