If you’re looking for a sortable, virtual, customizable tree component for React.js, look no further.
React Arborist is a library that provides all the common features for working with trees in React.
You can select one or many nodes to drag and drop into new positions, open and close folders, render an inline form for renaming, efficiently show thousands of items, and provide your own node renderer to control the style.
1. Installation.
# Yarn
$ yarn add react-arborist
# NPM
$ npm i react-arborist
2. This example shows how to create a basic tree view in the app.
const data = {
id: "The Root",
children: [{id: "Node A"}, {id: "Node B"}]
}
function App() {
return (
<Tree data={data}>
{Node}
</Tree>
);
}
function Node({ ref, styles, data}) {
return (
<div ref={ref} style={styles.row}>
<div style={styles.indent}>
{data.name}
</div>
</div>
)
}
3. Available tree props.
export interface TreeProps<T> {
children: NodeRenderer<T>;
data: T;
height?: number;
width?: number;
rowHeight?: number;
indent?: number;
hideRoot?: boolean;
onToggle?: ToggleHandler;
onMove?: MoveHandler;
onEdit?: EditHandler;
getChildren?: string | ((d: T) => T[]);
isOpen?: string | ((d: T) => boolean);
disableDrag?: string | boolean | ((d: T) => boolean);
disableDrop?: string | boolean | ((d: T) => boolean);
openByDefault?: boolean;
className?: string | undefined;
handle?: Ref<TreeApi<T>>;
onClick?: MouseEventHandler;
onContextMenu?: MouseEventHandler;
}
4. Available tree provider props.
export type TreeProviderProps<T> = {
imperativeHandle: React.Ref<TreeApi<T>> | undefined;
children: ReactElement;
height: number;
indent: number;
listEl: MutableRefObject<HTMLDivElement | null>;
onToggle: ToggleHandler;
onMove: MoveHandler;
onEdit: EditHandler;
onClick?: MouseEventHandler;
onContextMenu?: MouseEventHandler;
renderer: NodeRenderer<any>;
rowHeight: number;
root: Node<T>;
width: number;
};
Author: brimdata
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/brimdata/react-arborist
License: MIT