https://github.com/robert-w/react-checkbox-tree

A simple example of a bare bones tree widget with checkboxes built in React.
https://github.com/robert-w/react-checkbox-tree

Last synced: about 16 hours ago
JSON representation

A simple example of a bare bones tree widget with checkboxes built in React.

• Host: GitHub
• URL: https://github.com/robert-w/react-checkbox-tree
• Owner: Robert-W
• License: mit
• Created: 2015-01-06T19:56:00.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2015-02-05T22:54:07.000Z (almost 10 years ago)
• Last Synced: 2024-04-11T01:21:50.830Z (9 months ago)
• Language: JavaScript
• Size: 203 KB
• Stars: 7
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
react-checkbox-tree

===================

> A simple example of a bare bones tree widget with checkboxes built in React.

You can check out a live demo here.

This example is intended to be a very simple, yet flexible, tree widget with checkboxes for each node built in React.

This tree can have as many nested child nodes as desirable and does not have to have a root node.

This is a controlled React component, as such it needs to have some sort of way to identify the checkboxes to maintain their state so currently each node needs a unique id. View src/js/TreeData.js to see sample data structure.

The checkboxes act independently of the tree. Clicking the +/− icon or the label for the tree node will toggle the children. Clicking a checkbox will activate the checkbox and if the checkbox is becoming checked, it will check all the children, else, it will only turn itself off and not it's children. This behavior can be easily modified per your requirements for the tree.


## Installation

This project requires node.js and npm to be installed.

If you need to install those, view the node.js homepage and click download.


Once those are installed, clone the repo, and run npm install.  If you get some sort of permission errors and your on a mac, you may need to run sudo npm install.


## Getting Started

Once you have the code downloaded and have installed the dependencies with npm install you are ready to begin.

Simply run npm run start to generate the bundles via webpack and then open up the index page in your favorite webserver.

To generate a minified bundle, run npm run build

If your curious about how the build and start command work, take a look at the package.json and the webpack.config.js to see the commands being run and the configurations being used by webpack.


## Gotchas

There is an onTouchEnd event in TreeNode.js in the render function paired with an onClick, this works perfect in this example but when using other libraries in combination with this tree, both of those events fire causing some strange behavior, if you see this when using it on mobile, remove the onTouchEnd events.