react-dynamic-checkbox-tree

Demo: https://modest-varahamihira-1caac8.netlify.com/

Features

• No dependencies
• Size only 2.8 kb (gzipped)
• For React 15.x and 16.x.
• Styles customizable

Usage

Installation

Install the library using your favorite dependency manager:

Using yarn:

yarn add react-dynamic-checkbox-tree

Using npm:

npm install react-dynamic-checkbox-tree --save

Render Component

import React from 'react'
import CheckboxTree from 'react-dynamic-checkbox-tree'

const exampleData = [
  {
    id: 1000,
    label: 'Root 1',
    children: [
      { id: 1100, label: 'Children 1' },
      {
        id: 1200,
        label: 'Parent 1',
        children: [
          { id: 1210, label: 'Children 1' },
          { id: 1220, label: 'Children 2' },
        ],
      },
    ],
  },
  {
    id: 2000,
    label: 'Root 2',
    children: [{ id: 2100, label: 'Children 1' }],
  },
  {
    id: 3000,
    label: 'Root 3',
  },
  {
    id: 4000,
    label: 'Root 4',
    children: [
      {
        id: 4100,
        label: 'Parent 1',
        children: [
          { id: 4110, label: 'Children 1' },
          { id: 4120, label: 'Children 2' },
          {
            id: 4130,
            label: 'Parent 1',
            children: [
              { id: 4131, label: 'Children 1' },
              { id: 4132, label: 'Children 2' },
              { id: 4133, label: 'Children 3' },
            ],
          },
          { id: 4140, label: 'Children 3' },
        ],
      },
      {
        id: 4200,
        label: 'Parent 2',
        children: [
          { id: 4210, label: 'Children 1' },
          { id: 4220, label: 'Children 2' },
          { id: 4230, label: 'Children 3' },
          { id: 4240, label: 'Children 4' },
          { id: 4250, label: 'Children 5' },
        ],
      },
    ],
  },
]

export default class MyComponent extends React.Component {
  state = {
    checked: [], // This stores the checked ID's
  }

  render() {
    return (
      <CheckboxTree
        nodes={exampleData}
        checked={this.state.checked}
        onCheck={checked => this.setState({ checked })}
      />
    )
  }
}

API

| Prop | Type | Description | | ------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | nodes | array | Required. Array of objects. Objects must have id (number) and label (string), optionally children. Children has the same format, array of objects: (id, label and optionally more children) | | checked | array | Required. Array of numbers (id). Should derive from state (this.state.checked). If empty, no checkboxes are checked by default | | onCheck | function | Required. Function to update the state when nodes are checked. Should not be modified. See the example | | Customize: classes | | | | classNameNodeContainer | String | Optional. class for the container. | | classNameLabel | String | Optional. class for a label. | | classNameParentLabel | String | Optional. class a parent label. | | classNameCheckbox | String | Optional. class for a checkbox. | | classNameCheckboxIcon | String | Optional. class for a checkbox icon. | | Customize: inline-style | | | | styleNodeContainer | object | Optional. style for the container. | | styleLabel | object | Optional. style for a label. | | styleParentLabel | object | Optional. style for a parent label. | | styleCheckbox | object | Optional. style for a checkbox. | | styleCheckboxIcon | object | Optional. style for a checkbox icon. |