React Tree Component
npm install @idui/react-tree




- Docs
- Playground
``bash`
npm install --save @idui/react-tree
`bash`
yarn add @idui/react-tree
`jsx
import React from 'react'
import Tree from '@idui/react-tree'
const nodes = [
{ label: 'Cake' },
{ label: 'Coffee', childNodes: [
{ label: 'Cappuccino' },
{ label: 'Latte' },
{ label: 'Americano' },
]},
]
function Example() {
return
}
`
`jsx
import React from 'react'
import styled from 'styled-components'
import Tree from '@idui/react-tree'
const CustomTree = styled(Tree)
border-left: 1px solid #aeaeae;
margin-left: 3.5px;;
const CustomLeaf = styled.div
color: rgba(0, 0, 0, 0.7);
margin-bottom: 2px;
${ifProp(
'hasChildren',
css
transition: color 0.3s ease-in-out;
cursor: pointer;
&:hover {
color: rgba(0, 0, 0, 1);
}
)};;
const renderCustomLeaf = ({ toggle, isOpen, icon, label, hasChildren }) => (
{hasChildren && (isOpen ? '▾' : '▸') + ' '}
{icon} {label}
);
const nodes = [
{
label: 'Cake',
icon: '🍰',
childNodes: [
{
label: 'Chocolate',
icon: '🍫',
},
{
label: 'Vanilla',
icon: '🍬',
},
{
label: 'Strawberry',
icon: '🍓',
},
],
}]
function Example() {
return
}
`
`jsx
import React, { useState } from 'react'
import { CheckboxTree } from '@idui/react-tree'
const nodes = [
{ label: 'Cake', id: 'cake' },
{ label: 'Coffee', id: 'coffee', childNodes: [
{ label: 'Cappuccino', id: 'Cappuccino' },
{ label: 'Latte', id: 'Latte' },
{ label: 'Americano', id: 'Americano' },
]},
]
function Example() {
const [checkedKeys, setCheckedKeys] = useState([]);
return (
checkedKeys={checkedKeys}
nodes={nodes}
onChange={setCheckedKeys}
/>
);
}
`
`jsx
import React, { useState, useCallback } from 'react'
import styled from 'styled-components'
import Tree from '@idui/react-tree'
const nodes = [
{ label: 'Cake' },
{ label: 'Coffee', childNodes: [
{ label: 'Cappuccino' },
{ label: 'Latte' },
{ label: 'Americano' },
]},
]
const SearchTreeLeaf = styled.div
.highlight {
background-color: #ffa7a7;
};
function Example() {
const [search, setSearch] = useState('');
const handleSearch = useCallback((e) => {
setSearch(e.target.value);
}, []);
return (
MIT © kaprisa57@gmail.com