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.
Two optional themes are supported when using React Tree:
Includes all the logic, based on @emotion/core - README
Based on the basic tree logic, using Material-UI components - README
Both options support component customization.
Examples can be found - here
| 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" } |
- Fork the repository and create your branch from
master. - Install the project:
yarn install - Run tests:
yarn testoryarn test:watch - Run dev environment:
yarn storybookand head to https://localhost:6006
Styling patterns were taken from react-select - README