Tree React Component

• Docs
• Playground

Install

npm install --save @idui/react-tree

yarn add @idui/react-tree

See props in Docs

Basic Example

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 <Tree nodes={nodes} />
}

Custom Tree

• Live Example

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 }) => (
  <CustomLeaf hasChildren={hasChildren} onClick={toggle}>
    {hasChildren && (isOpen ? '▾' : '▸') + ' '}
    {icon} {label}
  </CustomLeaf>
);

const nodes = [
{
  label: 'Cake',
  icon: '🍰',
  childNodes: [
    {
      label: 'Chocolate',
      icon: '🍫',
    },
    {
      label: 'Vanilla',
      icon: '🍬',
    },
    {
      label: 'Strawberry',
      icon: '🍓',
    },
  ],
}]

function Example() {
  return <Tree nodes={nodes} renderLeaf={renderCustomLeaf} />
}

Checkbox Tree

• Props
• Live Example

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

Search in Tree

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 (
    <div>
      <input type="search" onChange={handleSearch} />
      <Tree
        nodes={nodes}
        search={search}
        filterHighlighted
        renderLeaf={({ toggle, isOpen, label, hasChildren }) => (
          <SearchTreeLeaf onClick={toggle}>
            {hasChildren && (isOpen ? '▾' : '▸') + ' '}
            <span dangerouslySetInnerHTML={{ __html: label }} />
          </SearchTreeLeaf>
        )}
      />
    </div>
  );
}

See more details in storybook

License

MIT © kaprisa57@gmail.com