Package Exports

@idui/react-tree
@idui/react-tree/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@idui/react-tree) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Tree React Component

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

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>
  );
}

JSPM

@idui/react-tree