reactjs-checkbox-tree (Fork by royaltics-solutions)


> A simple and elegant checkbox tree for React.

!Demo

---

About this fork

This project is a refactor of the original reactjs-checkbox-tree by Jake Zatecky and contributors, updated and recompiled to be fully compatible with Vite 5 (2025) and its latest dependencies, with React 19 support.

$3

- Full refactor to support Vite build system and ecosystem.
- Updated peerDependencies and devDependencies to React 18/19 and Vite 5.
- Removal of LESS/SCSS in favor of pure CSS with CSS variables (--vars) for styling.
- Updated typings for better TypeScript support.
- Complete rewrite of icons handling with ReactNode type and partial overrides.
- Codebase split and optimized for modern React and TypeScript usage.

Full credit to original author Jake Zatecky and all contributors at reactjs-checkbox-tree homepage.

This fork is maintained by royaltics-solutions due to lack of continuity in the original project.

---

Installation

``bash
yarn add reactjs-checkbox-tree
or
npm install reactjs-checkbox-tree --save
`

Usage

Import the pure CSS style:

`jsx
import 'reactjs-checkbox-tree/lib/reactjs-checkbox-tree.css';
//Basic example:

import React, { useState } from 'react';
import CheckboxTree from 'reactjs-checkbox-tree';

const nodes = [{
value: 'mars',
label: 'Mars',
children: [
{ value: 'phobos', label: 'Phobos' },
{ value: 'deimos', label: 'Deimos' },
],
}];

function Widget() {
const [checked, setChecked] = useState([]);
const [expanded, setExpanded] = useState([]);

return (
nodes={nodes}
checked={checked}
expanded={expanded}
onCheck={setChecked}
onExpand={setExpanded}
/>
);
}

`

Icons customization

Use iconsClass="fa4" for FontAwesome 4 support, or override icons with the icons prop:


`jsx
...
iconsClass="fa4"
icons={{
check: ,
uncheck: ,
halfCheck: ,
expandClose: ,
expandOpen: ,
expandAll: ,
collapseAll: ,
parentClose: ,
parentOpen: ,
leaf: ,
}}
/>

`
Or integrate with @fortawesome/reactjs-fontawesome:


`jsx
import { FontAwesomeIcon } from '@fortawesome/reactjs-fontawesome'

...
icons={{
check: ,
uncheck: ,
halfCheck: ,
expandClose: ,
expandOpen: ,
expandAll: ,
collapseAll: ,
parentClose: ,
parentOpen: ,
leaf:
}}
/>
`

TypeScript typings (new)

`ts
import { CHECK_MODEL } from "../components/constants";

export interface Icons {
check: React.ReactNode;
uncheck: React.ReactNode;
halfCheck: React.ReactNode;
expandClose: React.ReactNode;
expandOpen: React.ReactNode;
expandAll: React.ReactNode;
collapseAll: React.ReactNode;
parentClose: React.ReactNode;
parentOpen: React.ReactNode;
leaf: React.ReactNode;
}

export interface Language {
collapseAll: string;
expandAll: string;
toggle: string;
}

export interface TreeNodeInfo {
value: string;
checked?: boolean;
halfCheck?: boolean;
expanded?: boolean;
disabled?: boolean;
}

export interface CheckboxTreeNode extends TreeNodeInfo {
label: string;
title?: string;
children?: CheckboxTreeNode[];
showCheckbox?: boolean;
className?: string;
parent?: CheckboxTreeNode;
icon?: React.ReactNode;
isChild?: boolean;
isParent?: boolean;
isLeaf?: boolean;
treeDepth?: number;
index?: number;
}

export interface NodeModelProps {
disabled?: boolean;
noCascade?: boolean;
}

export interface FlatNodes {
[value: string]: CheckboxTreeNode;
}

export interface CheckboxTreeProps {
nodes: CheckboxTreeNode[];
checkModel?: typeof CHECK_MODEL.LEAF | typeof CHECK_MODEL.ALL;
checked?: string[];
direction?: "ltr" | "rtl";
disabled?: boolean;
expandDisabled?: boolean;
expandOnClick?: boolean;
expanded?: string[];
icons?: Partial;
id?: string | null;
lang?: Language;
nativeCheckboxes?: boolean;
noCascade?: boolean;
onlyLeafCheckboxes?: boolean;
optimisticToggle?: boolean;
showExpandAllButtons?: boolean;
showNodeIcon?: boolean;
showNodeTitle?: boolean;
onCheck?: (checked: string[], node: CheckboxTreeNode) => void;
onClick?: (node: CheckboxTreeNode) => void;
onExpand?: (expanded: string[], node?: CheckboxTreeNode) => void;
}
``

Fork credits

This fork is maintained by royaltics-solutions, preserving and modernizing the original work by:

Jake Zatecky and contributors
Homepage: https://jakezatecky.github.io/reactjs-checkbox-tree
Repo: https://github.com/jakezatecky/reactjs-checkbox-tree

Fork repo: https://github.com/royaltics-solutions/reactjs-checkbox-tree