React tree-view component built for performance, customizability and large data sets. This library provides:
- A base theme built on top of material UI
- Flexible styling (provide a theme or override the default theme)
- The ability to plug in your own custom components
- Lazy loading (i.e. load children when expanding a node)
- Pagination for long lists of child nodes
- Animations when expanding and collapsing nodes
- The ability to override default methods for expanding/collapsing/selecting nodes
- Keyboard accessibility
npm install react-lazy-paginated-tree --save
This library depends on:
Please ensure that these are included in your project.
'use strict';
import React, { component } from 'react';
import ReactDOM from 'react-dom';
import { Tree, SampleTree } from 'react-lazy-paginated-tree';
class ReactLazyPaginatedTree extends React.Component {
render() {
return <Tree nodes={SampleTree} />;
}
}
const content = document.getElementById('content');
ReactDOM.render(<ReactLazyPaginatedTree />, content);An online demo for the quick start, theming, lazy loading and pagination can be found Here.
The component accepts the following props:
nodes: Array<Node>: (required) A list of nodes that represent the top level of the tree
loadChildren: Function: function to load children of a node, called with(node: Node, pageLimit?: number). A parse method must be specified if the structure of children returned from this method doesn't matchArray<Node>.parse: Function: function that accepts a list of children (via loadChildren) and returns a list ofArray<Node>. This must be provided if loadChildren doesn't returnArray<Node>.
pageLimit: number: pagination page limit. If specified the tree will attempt to paginate by concatenating existing nodes with nodes returned by loadChildren.
onUpdate: Function: function called with(state: TreeState)whenever the tree state changes. Can be used to hook into external data providers (i.e. with Redux).
toggle: Function: function called with(e: Event, node: Node)when node<Expander />is clicked.onKeyToggle: Function: function called with(e: Event, node: Node)when node<Expander />keypress event is triggered.select: Function: function called with(e: Event, node: Node)when node is clicked.onKeySelect: Function: function called with(e: Event, node: Node)when node keypress event is triggered.
theme: Theme: The easiest way to add custom styling. Simply provide atheme: Themejavascript styles object override the default theme.indentWidth: number: The padding depth for each level of nesting within the tree.
The component tree looks like this:
<List>
<Loading />
<ListItem>
<DepthPadding />
<Expander />
<Checkbox />
<Body />
</ListItem>
<Paginator />
</List>
Each of these components can be substituted with your own custom component. The default theme is built on Material-UI. The components are:
List: <React.Component />ListItem: <React.Component />Expander: <React.Component />Checkbox: <React.Component />Body: <React.Component />Paginator: <React.Component />Loading: <React.Component />DepthPadding: <React.Component />
import { Tree } from 'react-lazy-paginated-tree'
import { defaultTheme, minimalTheme } from 'react-lazy-paginated-tree'
import { SampleTree } from 'react-lazy-paginated-tree'
import type {
TreeProps,
TreeState,
TreeNodeProps,
TreeNodeState,
Node,
Theme,
CheckboxProps,
BodyProps,
ExpanderProps,
ListItemProps,
ListProps,
LoadingProps,
DepthPaddingProps,
} from 'react-lazy-paginated-tree'
export type TreeProps = {
nodes: Array<Node>,
pageLimit?: number,
parse?: Function,
style?: Object, // equivalent to overriding theme.treeStyle
theme?: Theme,
indentWidth?: number,
List?: any,
ListItem?: any,
Expander?: any,
Checkbox?: any,
Body?: any,
Paginator?: any,
Loading?: any,
DepthPadding?: any,
toggle?: Function,
onKeyToggle?: Function,
select?: Function,
onKeySelect?: Function,
loadChildren?: Function,
onUpdate?: Function,
};
export type TreeState = {
nodes: Array<Node>,
};
export type TreeNodeProps = {
depth: number,
node: Node,
theme: Theme,
indentWidth: number,
List: any,
ListItem: any,
Expander: any,
Checkbox: any,
Body: any,
Paginator: any,
Loading: any,
DepthPadding: any,
loadMore: Function,
onKeyLoadMore: Function,
toggle: Function,
onKeyToggle: Function,
select: Function,
onKeySelect: Function,
};
export type TreeNodeState = {
expanderLoading: boolean,
paginatorLoading: boolean,
};
export type Node = {
id: string,
name: string,
description: string,
children: Array<Node>,
numChildren: number,
page: number,
expanded: boolean,
selected: boolean,
};
export type Theme = {
treeStyle: Object,
bodyStyle: Object,
checkboxStyle: Object,
checkboxIconStyle: Object,
checkboxIconCheckedStyle: Object,
expanderStyle: Object,
listItemStyle: Object,
paginatorStyle: Object,
paginatorTextStyle: Object,
loadingStyle: Object,
loadingTextStyle: Object,
listStyle: Object,
};
export type CheckboxProps = {
checked: boolean,
theme: Theme,
node: Node,
onChange: Function,
onKeyPress: Function,
};
export type BodyProps = {
theme: Theme,
node: Node,
onClick: Function,
onKeyPress: Function,
};
export type ExpanderProps = {
theme: Theme,
node: Node,
onClick: Function,
onKeyPress: Function,
};
export type ListItemProps = {
theme: Theme,
node: Node,
children: any,
onClick: Function,
onKeyPress: Function,
};
export type ListProps = {
theme: Theme,
node: Node,
children: any,
};
export type LoadingProps = {
theme: Theme,
node: Node,
};
export type DepthPaddingProps = {
indentWidth: number,
depth: number,
children: any,
};
MIT.