Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@kenshooui/material-tree

Package Overview
Dependencies
Maintainers
1
Versions
27
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@kenshooui/material-tree

Material Tree is an enrichment to React Tree component.

  • 0.0.2-canary.151.403.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
5
decreased by-72.22%
Maintainers
1
Weekly downloads
 
Created
Source

Material Tree

Material Tree is an enrichment to React Tree component.

It is based on basic React Tree logic and allows a user to display and manage a hierarchical structure of items using Material-UI components.

Installation

Since Material Rree is based on React Tree< logic, you need to install both @kenshooui/react-tree and @kenshooui/material-tree.

Dependencies to @material-ui/core and @material-ui/icons are needed only if they don't exist in your project.

Installation using npm:

 npm install --save @kenshooui/react-tree @kenshooui/material-tree

 npm install --save @material-ui/core @material-ui/icons

Installation using Yarn:

 yarn add @kenshooui/material-tree @kenshooui/react-tree

 yarn add @material-ui/core @material-ui/icons

How to use

import MaterialTree from "@kenshooui/material-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"]
];

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

Props

NameTypeDefaultDescription
structureArray[]Component input - array of leaves along with their ancestors
titleString""Title to be displayed on root mode
onSelectFunc() => {}callback when clicking a leaf
stylesObjectOptional - enables customized styles
widthnumber230 The width of the tree component
heightnumber300 The height of the tree component
noResultsTextStringNo matching resultsThe message the is displayed when having no results on searching
noResultsRendererComponentno_results.jsComponent to replace the default NoResults component. Renders when having no results on searching
noResultsIconRendererComponentWarning iconComponent to replace the default NoResultsIcon component.
headerRendererComponentheader.jsComponent to replace the default Header component.
backIconRendererComponentChevronLeft iconComponent to replace the default BackIcon component.
inputRendererComponentinput.js️Component to replace the default Input component.
inputIconRendererComponentSearch iconComponent to replace the default InputIcon component.
clearIconRendererComponentClear iconComponent to replace the default CleaseIcon component.
itemRendererComponentitem.js️Component to replace the default Item component.
itemsRendererComponentitems.jsComponent to replace the default Items component.
forwardIconRendererComponentChevronRight iconComponent to replace the default ForwardIcon component.
treeContainerRendererComponenttree_container.jsComponent to replace the default TreeContainer component.
markSelectedItembooleanfalseToggle to mark selected item.

Customization

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..)

width - The width of the tree component

height - The height of the tree component


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 depth.
For example for the following structure: ["Profiles", "Performance", "Clicks"]

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

onClick - Triggers the back event on click

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

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

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:

children - All items

height - The height of the items list


Item

Use the itemRenderer to replace the default component.

Each header receives the following props:

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.

text - Displayed when there are no results

height - The height of the items list

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

FAQs

Package last updated on 12 Jan 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc