Research
Security News
Malicious npm Packages Inject SSH Backdoors via Typosquatted Libraries
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
@kenshooui/material-tree
Advanced tools
Material Tree is an enrichment to React Tree component.
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.
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
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={() => {}}
/>;
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 the is displayed when having no results on searching |
noResultsRenderer | Component | no_results.js | Component to replace the default NoResults component. Renders when having no results on searching |
noResultsIconRenderer | Component | Warning icon | Component to replace the default NoResultsIcon component. |
headerRenderer | Component | header.js | Component to replace the default Header component. |
backIconRenderer | Component | ChevronLeft icon | Component to replace the default BackIcon component. |
inputRenderer | Component | input.js️ | Component to replace the default Input component. |
inputIconRenderer | Component | Search icon | Component to replace the default InputIcon component. |
clearIconRenderer | Component | Clear icon | 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 | ChevronRight icon | Component to replace the default ForwardIcon component. |
treeContainerRenderer | Component | tree_container.js | Component to replace the default TreeContainer component. |
markSelectedItem | boolean | false | Toggle to mark selected item. |
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"]
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
Material Tree is an enrichment to React Tree component.
The npm package @kenshooui/material-tree receives a total of 4 weekly downloads. As such, @kenshooui/material-tree popularity was classified as not popular.
We found that @kenshooui/material-tree demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.