React-Checkbox-Tree NPM package

I am happy to introduce you to my checkbox tree package that helps you easily add it to your project and use it with your ts/js code in seconds. I developed this package as a small reusable side project during my employment. It uses general React features and design elements of Bootstrap React components.

You can easily install it from your command line:

$ npm install react-checkbox-tree

This project depends on fontawesome and react. All documentation for this project is available on its GitHub page.

Tree Element

You can use the tree element and add it to your view, notice that you are passing the data and accessors variables into the component:

<CheckboxTree data={data} accessors={accessors} />

The CheckboxTree element can also have onChange parameter that accepts a method(items) as value.

Api

CheckboxTree

The main element that holds the tree of checkboxes from the data that is built with accessors.

  • data A javascript structure that holds all the data and could be also retreived from API call or other methods. Must be an array.
  • accessors An array of structures that contain ccessors to the data levels for the tree. The data can contain a stacked tree with different parameters, here you define which parameters to choose for name, value and type, nd also how to select child nodes. { label: ‘paramForLabel’, value: ‘paramForValue’, type: ‘anyTypeName’, leaves: ‘paramForChildren’ }
  • onChange Accepts a function with a single parameter items which is a structure of tree types that represent different levels of the tree and values selected on that levels.

Now you are ready to use this plugin. Feel free to open new issues or contribute to the project.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.