React Tree

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