@kenshooui/react-tree

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.

The basic tree is built using @emotion/core, and supports both styling and component renderers customizations.

Examples can be found - here

Installation

Installation using npm:

 npm install @kenshooui/react-tree --save

Installation using Yarn:

 yarn add @kenshooui/react-tree

How to use

import ReactTree from "@kenshooui/react-tree";

const structure = [
  ["Profiles", "Performance", "Clicks"],
  ["Profiles", "Performance", "Imp"],
  ["Profiles", "Attribute", "Agency"],
  ["Profiles", "Attribute", "Progress"],
  ["Profiles", "Attribute", "Create Date"],
  ["Campaigns", "Performance", "Clicks"],
  ["Campaigns", "Performance", "Cost"],
  ["Campaigns", "Performance", "CTR"],
  ["Campaigns", "Attribute", "campaign name"],
  ["Ad Groups", "Attribute", "Ad Group Name"]
];

<ReactTree
  structure={structure}
  title={"Add filter criteria"}
  onSelect={() => {}}
/>;

Props

Can be found - here

Customization

Styling

The basic tree gets "styles" object property.
If the "styles" object is empty, the basic tree will use the default styles.
The "styles" object can override any of the following:

• container - tree container
• header - tree header. Displays tree title or item's parents
• headerBackIcon - back icon
• item - a single item from the hierarchical tree.
• highlight - the style of the searched (highlighted) letters of an item
• searchItemInitial: the style of the basic ("not searched") letters of an item
• parents - the style of parents sub-title on search
• items - items list container
• noResults - displayed when there are no found items
• noResultsIcon - the icon displayed when there are no found items
• noResultsText - the massage displayed when there are no found items
• input - search input
• searchInput - the icon of the search input
• clearInput - the icon of the search input "clear" button
• forwardIcon - the icon that is part of the item component. Displayed when the item has children.
• selectedItem - the style of the selectedItem item
• inputWrapper - the style of input wrapper

Renderers

You can replace the renderers of the following components:

Container

Use the treeContainerRenderer to replace the default component.

Each treeContainer receives the following props:

containerRef - Holds a reference to the tree container component

children - Holds all sub components (like header, input, items, etc..)

getStyles - Gets relevant styles

styles - Enables using customized styles

Header

Use the headerRenderer to replace the default component.

Each header receives the following props:

headerRef - Holds a reference to the header component

parents - Holds the parents of the current level.
For example for the following structure: ["Profiles", "Performance", "Clicks"]

• In the first level the parents are: [""]
• In the second level the parents are: ["Profile"]
• In the third level the parents are: ["Profile, "Performance"]

onClick - Triggers the back event on click

title - The title of the header. Displayed on the first level.

getStyles - Gets relevant styles

styles - Enables using customized styles

backIconRenderer - Use the backIconRenderer to replace the default back button component.

Input

Use the inputRenderer to replace the default component.

Each header receives the following props:

inputRef - Holds a reference to the input component

searchTerm - Holds the searched value

onInputChange - Triggers set searchTerm event on change

getStyles - Gets relevant styles

styles - Enables using customized styles

inputIconRenderer - Use the inputIconRenderer to replace the default input icon component.

clearIconRenderer - Use the clearIconRenderer to replace the default clear input icon component.

Items

Use the itemsRenderer to replace the default component.

Each header receives the following props:

getStyles - Gets relevant styles

styles - Enables using customized styles

children - All items

Item

Use the itemRenderer to replace the default component

Each header receives the following props:

getStyles - Gets relevant styles

styles - Enables using customized styles

searchTerm - Holds the searched value

item - Represents an item from the given structure

onClick - Is called when clicking on an item

forwardIconRenderer - Use the forwardIconRenderer to replace the default forward icon component

selectedItem - Represents the current selected item. Is relevant when markSelectedItem = true

No Results

Use the noResultsRenderer to replace the default component.

getStyles - Gets relevant styles

styles - Enables using customized styles

text - Displayed when there are no results

noResultsIconRenderer - Use the noResultsIconRenderer to replace the default no results warning icon component.