Elegant Checkbox Tree For React

Description:

A simple, elegant, and multi-level checkbox tree view component for React.

How to use it:

1. Install and import the checkbox tree component.

# Yarn
$ yarn add react-checkbox-tree
# NPM
$ npm i react-checkbox-tree

import React from 'react';
import CheckboxTree from 'react-checkbox-tree';
import 'react-checkbox-tree/lib/react-checkbox-tree.css';

2. Define your nested nodes as follows:

const nodes = [{
  value: 'frontend',
  label: 'Frontend',
  children: [
    { value: 'html', label: 'HTML' },
    { value: 'css', label: 'CSS' },
    { value: 'javascript', label: 'JavaScript' },
    // ...
  ],
  // ...
}];

3. Add the component to the app.

class Widget extends React.Component {
  state = {
    checked: [],
    expanded: [],
  };
  render() {
    return (
      <CheckboxTree
        nodes={nodes}
        checked={this.state.checked}
        expanded={this.state.expanded}
        onCheck={checked => this.setState({ checked })}
        onExpand={expanded => this.setState({ expanded })}
      />
    );
  }
}

4. All available component props.

checkModel: constants.CheckModel.LEAF,
checked: [],
direction: 'ltr',
disabled: false,
expandDisabled: false,
expandOnClick: false,
expanded: [],
icons: {
  check: <span className="rct-icon rct-icon-check" />,
  uncheck: <span className="rct-icon rct-icon-uncheck" />,
  halfCheck: <span className="rct-icon rct-icon-half-check" />,
  expandClose: <span className="rct-icon rct-icon-expand-close" />,
  expandOpen: <span className="rct-icon rct-icon-expand-open" />,
  expandAll: <span className="rct-icon rct-icon-expand-all" />,
  collapseAll: <span className="rct-icon rct-icon-collapse-all" />,
  parentClose: <span className="rct-icon rct-icon-parent-close" />,
  parentOpen: <span className="rct-icon rct-icon-parent-open" />,
  leaf: <span className="rct-icon rct-icon-leaf" />,
},
iconsClass: 'fa4',
id: null,
lang: {
  collapseAll: 'Collapse all',
  expandAll: 'Expand all',
  toggle: 'Toggle',
},
name: undefined,
nameAsArray: false,
nativeCheckboxes: false,
noCascade: false,
onlyLeafCheckboxes: false,
optimisticToggle: true,
showExpandAll: false,
showNodeIcon: true,
showNodeTitle: false,
onCheck: () => {},
onClick: null,
onExpand: () => {},

Preview: