Xatabch/tree-component

Virtualized tree component

A tiny virtualized react tree component based on react-virtualized.

import {TreeComponent} from "virtualized-tree-component";

<div>
    <TreeComponent nodes={nodes} />
</div>

Showcases

See our examples and Showcase paragraph for url.

• Big tree(~100k elements)

Install

npm install virtualized-tree-component

Nodes and Tree interfaces

export interface Node {
    id: NodeId;
    name: string;
    children?: Node[];
    expanded?: boolean;
}

export type Tree = Node[];

Usage

Render with default renderer

<div>
    <TreeComponent nodes={Nodes} />
</div>

Add custom nodes render

<div>
    <TreeComponent nodes={Nodes} NodeRenderer={
        (node) => <CustomRenderNode node={node} />
    }/>
</div>