Tree React Component


- Docs
- Playground

Install

``bash
npm install --save @idui/react-tree
`

`bash
yarn add @idui/react-tree
`

$3




$3

`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
}
`

$3

- Live Example

`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
}
`

$3

- Props
- Live Example

`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 (
{...props}
checkedKeys={checkedKeys}
nodes={nodes}
onChange={setCheckedKeys}
/>
);
}
`

$3

`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 (



);
}
``

$3

License

MIT © kaprisa57@gmail.com