react-checkbox-tree

react-checkbox-tree

Checkbox treeview for React.

Installation

The easiest way to use react-checkbox-tree is to install from NPM and include it in your own React build process (e.g. using Webpack):

npm install react-checkbox-tree --save

Note – This library requires that Font Awesome styles are loaded in the browser.

Usage

A quick usage example is included below. Note that the react-checkbox-tree component is controlled. In other words, it is stateless. You must update its checked and expanded properties whenever a change occurs.

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() {
        const { checked, expanded } = this.state;

        return (
            <Tree
                nodes={nodes}
                checked={checked}
                expanded={expanded}
                onCheck={checked => this.setState({ checked }}
                onExpand={expanded => this.setState({ expanded }}
            />
        );
    }
}

Properties

Property	Type	Description	Default
nodes	array	Required. Specifies the tree nodes and their children.
checked	array	An array of checked node values.	[]
expanded	array	An array of expanded node values.	[]
onCheck	function	onCheck handler: function(checked) {}	() => {}
onExpand	function	onExpand handler: function(expanded) {}	() => {}
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
optimisticToggle	bool	If true, toggling a partially-checked node will select all children. If false, it will deselect.	true

Changelog

v0.4.1 (2017-02-15)

Deprecations

• [#20]: Add support for label in nodes property and deprecate title

New Features

• [#21]: Add greater accessibility support