Allows to render trees.
Use the package manager pnpm to install @tabula/ui-tree
.
pnpm add @tabula/ui-tree
Usage of the UiTree
is simple:
import { FC } from 'react';
import { Tree as BaseTree, BranchComponentType, LeafComponentType, UiTree } from '@tabula/ui-tree';
import styles from './Tree.module.css';
type Data = {
name: string;
};
type Tree = BaseTree<number, Data>;
const Branch: BranchComponentType<number, Data> = ({ data, isExpanded, level, onToggle }) => (
<div className={styles.branch} style={{ '--level': level }}>
<button className={styles.branchToggle} onClick={onToggle} type="button">
{isExpanded ? '-' : '+'}
</button>
<span className={styles.branchName}>{data.name}</span>
</div>
);
const Leaf: LeafComponentType<number, Data> = ({ data, level }) => (
<div className={styles.leaf} style={{ '--level': level }}>
<span className={styles.leafName}>{data.name}</span>
</div>
);
type Props = {
tree: Tree;
};
export const Tree: FC<Props> = ({ tree }) => (
<UiTree className={styles.tree} branchComponent={Branch} leafComponent={Leaf} tree={tree} />
);
The tree
property contains a tree data to render. You can define type of ids, and data which expected in the tree
structure.
Ids of items must be unique and has type number
or string
.
See typings for more information.
The branchComponent
expects a React component which will be used to render branch element.
We provide following properties for branches:
-
id
- ID of an item; -
data
- data of an item; -
level
- nesting level of branch starting from0
; -
isExpanded
- flag which says about expanded branch or collapsed; -
onToggle
- callback which used to toggle branch, and which could be assigned to the interactive element inside of component.
The leafComponent
expects a React component which will be used to render leaf element.
We provide following properties for leafs:
-
id
- ID of an item; -
data
- data of an item; -
level
- nesting level of leaf starting from0
.
This is a pair of properties.
The pattern
is string value which contains a pattern which will be provided to the match
function.
The match
function is predicated, which takes node and pattern, and returns boolean flag.
If one of them will not be provided, or the pattern
will be is an empty string, then search will be ignored
completely.
You can provide custom CSS class which will be assigned to the root element.
We allow to assign test ID for the root element.
This project is ISC licensed.