{"id":13404059,"url":"https://github.com/jakezatecky/react-checkbox-tree","last_synced_at":"2026-04-09T22:07:59.056Z","repository":{"id":38360821,"uuid":"51052945","full_name":"jakezatecky/react-checkbox-tree","owner":"jakezatecky","description":"A simple and elegant checkbox tree for React.","archived":false,"fork":false,"pushed_at":"2024-03-08T10:36:27.000Z","size":2694,"stargazers_count":718,"open_issues_count":100,"forks_count":214,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-05-01T03:06:19.824Z","etag":null,"topics":["checkbox-treeview","react","tree","treeview"],"latest_commit_sha":null,"homepage":"https://jakezatecky.github.io/react-checkbox-tree/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jakezatecky.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-02-04T04:53:33.000Z","updated_at":"2025-04-30T16:01:50.000Z","dependencies_parsed_at":"2024-01-16T09:10:15.911Z","dependency_job_id":"b9c0eb52-75f9-4ef5-9bd3-1f39e2a20d3d","html_url":"https://github.com/jakezatecky/react-checkbox-tree","commit_stats":{"total_commits":520,"total_committers":29,"mean_commits":17.93103448275862,"dds":"0.18846153846153846","last_synced_commit":"0e6da68763736b1df32a30432d6b1182a07714e7"},"previous_names":[],"tags_count":47,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jakezatecky%2Freact-checkbox-tree","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jakezatecky%2Freact-checkbox-tree/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jakezatecky%2Freact-checkbox-tree/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jakezatecky%2Freact-checkbox-tree/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jakezatecky","download_url":"https://codeload.github.com/jakezatecky/react-checkbox-tree/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253656406,"owners_count":21943081,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["checkbox-treeview","react","tree","treeview"],"created_at":"2024-07-30T19:01:38.375Z","updated_at":"2026-04-09T22:07:59.042Z","avatar_url":"https://github.com/jakezatecky.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# react-checkbox-tree\n\n[![npm](https://img.shields.io/npm/v/react-checkbox-tree.svg?style=flat-square)](https://www.npmjs.com/package/react-checkbox-tree)\n[![Build Status](https://img.shields.io/github/actions/workflow/status/jakezatecky/react-checkbox-tree/main.yml?branch=master\u0026style=flat-square)](https://github.com/jakezatecky/react-checkbox-tree/actions/workflows/main.yml)\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://raw.githubusercontent.com/jakezatecky/react-checkbox-tree/master/LICENSE.txt)\n\n\u003e A simple and elegant checkbox tree for React.\n\n![Demo](demo.gif)\n\n## Usage\n\n### Installation\n\nInstall the library using your favorite dependency manager:\n\n```\nyarn add react-checkbox-tree\n```\n\nUsing npm:\n\n```\nnpm install react-checkbox-tree --save\n```\n\n\u003e **Note** \u0026ndash; By default, this library makes use of [Font Awesome][font-awesome] styles and expects them to be loaded in the browser.\n\n### Include CSS\n\nThe library's styles are available through one of the following files:\n\n* `node_modules/react-checkbox-tree/lib/react-checkbox-tree.css`\n* `node_modules/react-checkbox-tree/src/scss/react-checkbox-tree.scss`\n\nEither include one of these files in your stylesheets or utilize a CSS loader:\n\n``` javascript\nimport 'react-checkbox-tree/lib/react-checkbox-tree.css';\n```\n\n### Render Component\n\nBelow is a minimal example using [state hooks][docs-state-hooks]. Note that `CheckboxTree` is a [controlled][docs-controlled] component, so you must update its `checked` and `expanded` properties whenever a change occurs.\n\n``` jsx\nimport React, { useState } from 'react';\nimport CheckboxTree from 'react-checkbox-tree';\nimport 'react-checkbox-tree/lib/react-checkbox-tree.css';\n\nconst nodes = [{\n  value: 'mars',\n  label: 'Mars',\n  children: [\n    { value: 'phobos', label: 'Phobos' },\n    { value: 'deimos', label: 'Deimos' },\n  ],\n}];\n\nfunction Widget() {\n  const [checked, setChecked] = useState([]);\n  const [expanded, setExpanded] = useState([]);\n\n  return (\n    \u003cCheckboxTree\n      nodes={nodes}\n      checked={checked}\n      expanded={expanded}\n      onCheck={(checked) =\u003e setChecked(checked)}\n      onExpand={(expanded) =\u003e setExpanded(expanded)}\n    /\u003e\n  );\n}\n```\n\n\u003e **Note** \u0026ndash; All node objects **must** have a unique `value`. This component serializes the values into the `checked` and `expanded` array for performance optimizations.\n\n#### Changing the Default Icons\n\nBy default, **react-checkbox-tree** uses Font Awesome 5/6 for the various icons that appear in the tree. To utilize Font Awesome 4 icons, simply pass in `iconsClass=\"fa4\"`:\n\n``` jsx\n\u003cCheckboxTree\n    ...\n    iconsClass=\"fa4\"\n/\u003e\n```\n\nTo 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:\n\n``` jsx\n\u003cCheckboxTree\n    ...\n    icons={{\n        check: \u003cspan className=\"rct-icon rct-icon-check\" /\u003e,\n        uncheck: \u003cspan className=\"rct-icon rct-icon-uncheck\" /\u003e,\n        halfCheck: \u003cspan className=\"rct-icon rct-icon-half-check\" /\u003e,\n        expandClose: \u003cspan className=\"rct-icon rct-icon-expand-close\" /\u003e,\n        expandOpen: \u003cspan className=\"rct-icon rct-icon-expand-open\" /\u003e,\n        expandAll: \u003cspan className=\"rct-icon rct-icon-expand-all\" /\u003e,\n        collapseAll: \u003cspan className=\"rct-icon rct-icon-collapse-all\" /\u003e,\n        parentClose: \u003cspan className=\"rct-icon rct-icon-parent-close\" /\u003e,\n        parentOpen: \u003cspan className=\"rct-icon rct-icon-parent-open\" /\u003e,\n        leaf: \u003cspan className=\"rct-icon rct-icon-leaf\" /\u003e,\n    }}\n/\u003e\n```\n\nIf you are using the [`react-fontawesome`][react-fontawesome] library, you can also directly substitute those icons:\n\n``` jsx\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\n\n...\n\n\u003cCheckboxTree\n    ...\n    icons={{\n        check: \u003cFontAwesomeIcon className=\"rct-icon rct-icon-check\" icon=\"check-square\" /\u003e,\n        uncheck: \u003cFontAwesomeIcon className=\"rct-icon rct-icon-uncheck\" icon={['fas', 'square']} /\u003e,\n        halfCheck: \u003cFontAwesomeIcon className=\"rct-icon rct-icon-half-check\" icon=\"check-square\" /\u003e,\n        expandClose: \u003cFontAwesomeIcon className=\"rct-icon rct-icon-expand-close\" icon=\"chevron-right\" /\u003e,\n        expandOpen: \u003cFontAwesomeIcon className=\"rct-icon rct-icon-expand-open\" icon=\"chevron-down\" /\u003e,\n        expandAll: \u003cFontAwesomeIcon className=\"rct-icon rct-icon-expand-all\" icon=\"plus-square\" /\u003e,\n        collapseAll: \u003cFontAwesomeIcon className=\"rct-icon rct-icon-collapse-all\" icon=\"minus-square\" /\u003e,\n        parentClose: \u003cFontAwesomeIcon className=\"rct-icon rct-icon-parent-close\" icon=\"folder\" /\u003e,\n        parentOpen: \u003cFontAwesomeIcon className=\"rct-icon rct-icon-parent-open\" icon=\"folder-open\" /\u003e,\n        leaf: \u003cFontAwesomeIcon className=\"rct-icon rct-icon-leaf-close\" icon=\"file\" /\u003e\n    }}\n/\u003e\n```\n\n### Utility Functions\n\nIn addition to the `CheckboxTree` component, additional utility functions are available to set the initial state of the tree.\n\n#### `expandNodesToLevel(nodes, targetLevel)`\n\nCreates a list of all parent node keys until `targetLevel`.\n\nArguments:\n\n* `nodes` (`Array`): The same array of nodes passed into the main `CheckboxTree` component\n* `targetLevel` (`number`): The maximum expansion depth. Use `Infinity` for maximum depth.\n\nReturns:\n\n* `Array`: A list of node keys.\n\n### Properties\n\n| Property             | Type     | Description                                                                                                            | Default          |\n| -------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------- | ---------------- |\n| `nodes`              | array    | **Required**. Specifies the tree nodes and their children.                                                             |                  |\n| `checkKeys`          | array    | A list of [keyboard keys][mdn-key] that will trigger a toggle of the check status of a node.                           | `[' ', 'Enter']` |\n| `checkModel`         | string   | Specifies which checked nodes should be stored in the `checked` array. Accepts `'leaf'` or `'all'`.                    | `'leaf'`         |\n| `checked`            | array    | An array of checked node values.                                                                                       | `[]`             |\n| `direction`          | string   | A string that specify whether the direction of the component is left-to-right (`'ltr'`) or right-to-left (`'rtl'`).    | `'ltr'`          |\n| `disabled`           | bool     | If true, the component will be disabled and nodes cannot be checked.                                                   | `false`          |\n| `expandDisabled`     | bool     | If true, the ability to expand nodes will be disabled.                                                                 | `false`          |\n| `expandOnClick`      | bool     | If true, nodes will be expanded by clicking on labels. Requires a non-empty `onClick` function.                        | `false`          |\n| `expanded`           | array    | An array of expanded node values.                                                                                      | `[]`             |\n| `icons`              | object   | An object containing the mappings for the various icons and their components. See **Changing the Default Icons**.      | `{ ... }`        |\n| `iconsClass`         | string   | A string that specifies which icons class to utilize. Currently, `'fa4'` and `'fa5'` are supported.                    | `'fa5'`          |\n| `id`                 | string   | A string to be used for the HTML ID of the rendered tree and its nodes.                                                | `null`           |\n| `lang`               | object   | A key-value pairing of localized text. See [`src/js/lang/default.js`][lang-file] for a list of keys.                   | `{ ... }`        |\n| `name`               | string   | Optional name for the hidden `\u003cinput\u003e` element.                                                                        | `undefined`      |\n| `nameAsArray`        | bool     | If true, the hidden `\u003cinput\u003e` will encode its values as an array rather than a joined string.                          | `false`          |\n| `nativeCheckboxes`   | bool     | If true, native browser checkboxes will be used instead of pseudo-checkbox icons.                                      | `false`          |\n| `noCascade`          | bool     | If true, toggling a parent node will **not** cascade its check state to its children.                                  | `false`          |\n| `onlyLeafCheckboxes` | bool     | If true, checkboxes will only be shown for leaf nodes.                                                                 | `false`          |\n| `optimisticToggle`   | bool     | If true, toggling a partially-checked node will select all children. If false, it will deselect.                       | `true`           |\n| `showExpandAll`      | bool     | If true, buttons for expanding and collapsing all parent nodes will appear in the tree.                                | `false`          |\n| `showNodeIcon`       | bool     | If true, each node will show a parent or leaf icon.                                                                    | `true`           |\n| `showNodeTitle`      | bool     | If true, the `label` of each node will become the `title` of the resulting DOM node. Overridden by `node.title`.       | `false`          |\n| `onCheck`            | function | onCheck handler: `function(checked, targetNode) {}`                                                                    | `() =\u003e {}`       |\n| `onClick`            | function | onClick handler: `function(targetNode) {}`. If set, `onClick` will be called when a node's label has been clicked.     | `null`           |\n| `onContextMenu`      | function | onContextMenu handler: `function(event, targetNode) {}`. Triggers when right-clicking a node element.                  | `null`           |\n| `onExpand`           | function | onExpand handler: `function(expanded, targetNode) {}`                                                                  | `() =\u003e {}`       |\n\n#### `onCheck` and `onExpand`\n\n#### Node Properties\n\nIndividual nodes within the `nodes` property can have the following structure:\n\n| Property       | Type   | Description                              | Default |\n| -------------- | ------ | ---------------------------------------- | ------- |\n| `label`        | mixed  | **Required**. The node's label.          |         |\n| `value`        | mixed  | **Required**. The node's value.          |         |\n| `children`     | array  | An array of child nodes.                 | `null`  |\n| `className`    | string | A className to add to the node.          | `null`  |\n| `disabled`     | bool   | Whether the node should be disabled.     | `false` |\n| `icon`         | mixed  | A custom icon for the node.              | `null`  |\n| `showCheckbox` | bool   | Whether the node should show a checkbox. | `true`  |\n| `title`        | string | A custom `title` attribute for the node. | `null`  |\n\n[docs-controlled]: https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components\n[docs-state-hooks]: https://react.dev/reference/react/useState\n[font-awesome]: https://fontawesome.com\n[lang-file]: https://github.com/jakezatecky/react-checkbox-tree/blob/master/src/js/lang/default.js\n[mdn-key]: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key\n[react-fontawesome]: https://github.com/FortAwesome/react-fontawesome\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjakezatecky%2Freact-checkbox-tree","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjakezatecky%2Freact-checkbox-tree","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjakezatecky%2Freact-checkbox-tree/lists"}