Socket
Socket
Sign inDemoInstall

react-checkbox-tree

Package Overview
Dependencies
Maintainers
1
Versions
49
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-checkbox-tree

A simple and elegant checkbox tree for React.


Version published
Weekly downloads
87K
decreased by-2.84%
Maintainers
1
Weekly downloads
 
Created
Source

react-checkbox-tree

npm Build Status Dependency Status devDependency Status GitHub license

A simple and elegant checkbox tree for React.

Demo

Usage

Installation

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.

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:

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. 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() {
        return (
            <CheckboxTree
                nodes={nodes}
                checked={this.state.checked}
                expanded={this.state.expanded}
                onCheck={checked => this.setState({ checked })}
                onExpand={expanded => this.setState({ expanded })}
            />
        );
    }
}

Properties

PropertyTypeDescriptionDefault
nodesarrayRequired. Specifies the tree nodes and their children.
checkedarrayAn array of checked node values.[]
expandedarrayAn array of expanded node values.[]
onCheckfunctiononCheck handler: function(checked) {}() => {}
onExpandfunctiononExpand handler: function(expanded) {}() => {}
namestringOptional name for the hidden <input> element.undefined
nameAsArrayboolIf true, the hidden <input> will encode its values as an array rather than a joined string.false
optimisticToggleboolIf true, toggling a partially-checked node will select all children. If false, it will deselect.true
Node Properties

Individual nodes within the nodes property can have the following structure:

PropertyTypeDescription
labelstringRequired. The node's label.
valuemixedRequired. The node's value.
childrenarrayAn array of child nodes.
iconmixedA custom icon for the node.

Keywords

FAQs

Package last updated on 03 May 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc