/react-tree

A lightweight, easy-to-navigate selection component that displays hierarchical tree data in a searchable, filterable layout.

Primary LanguageJavaScriptMIT LicenseMIT

React Tree

Build Status Test Coverage

React Tree is a straight forward component that allows a user to display and manage a hierarchical structure of items in a clear and comfortable way.

Optional Themes

Two optional themes are supported when using React Tree:

Basic tree

Includes all the logic, based on @emotion/core - README

Material tree

Based on the basic tree logic, using Material-UI components - README

Both options support component customization.
Examples can be found - here


Props

Name Type Default Description
structure Array [] Component input - array of leaves along with their ancestors
title String "" Title to be displayed on root mode
onSelect Func () => {} callback when clicking a leaf
styles Object Optional - enables customized styles
width number 230 The width of the tree component
height number 300 The height of the tree component
noResultsText String No matching results The message to be displayed when having no results on searching
noResultsRenderer Component no_matching_items.js Component to replace the default NoResults component.
noResultsIconRenderer Component Component to replace the default NoResultsIcon component.
headerRenderer Component header.js Component to replace the default Header component.
backIconRenderer Component Component to replace the default BackIcon component.
inputRenderer Component input.js️ Component to replace the default Input component.
inputIconRenderer Component Component to replace the default InputIcon component.
clearIconRenderer Component Component to replace the default CleaseIcon component.
itemRenderer Component item.js️ Component to replace the default Item component.
itemsRenderer Component items.js Component to replace the default Items component.
forwardIconRenderer Component Component to replace the default ForwardIcon component.
treeContainerRenderer Component tree_container.js Component to replace the default TreeContainer component.
customItemsRenderer Component Component to replace the default Items && inner Item component.
selectedItem Object Optional - enables managing selected item. The Object should contain 2 fields: item and leaf, for example: { item: ["a","b","c"], leaf: "c" }

How to Contribute

Setting up development environment

  1. Fork the repository and create your branch from master.
  2. Install the project: yarn install
  3. Run tests: yarn test or yarn test:watch
  4. Run dev environment: yarn storybook and head to https://localhost:6006

Credit

Styling patterns were taken from react-select - README