Read the official documentation.
An interactive tree editor built on react-bootstrap and powered by versatile-tree.
- π² Interactive tree editing
- React-Bootstrap powered components and hooks for editing trees.
- π Expansion Management
- Track which nodes are expanded/collapsed.
- π Focus Management
- Track and retrieve which node has focus.
- π₯ Shortcuts
- Customizable shortcuts for easy tree manipulation.
- ποΈ Edit and View Modes
- Easily switch between editing and viewing.
- π Filters & Search
- Provide a filter function to make tree searchable and filterable.
- ποΈ Deletion & Recovery
- Delete nodes and easily recover them.
- π΄ Powered by versatile-tree
- Easy to use tree structure. Easily convert tree to/from Object and JSON forms.
If this project helped you, please consider buying me a coffee or sponsoring me. Your support is much appreciated!
- Documentation
- Overview
- Donate
- Table of Contents
- Installation
- Quick Start
- TypeScript
- Icon Attribution
- Contributing
- β Found It Helpful? Star It!
- License
npm i react-bootstrap-tree-editor
It's highly recommended you check out the demo and its source to quickly get yourself up and running.
Import the following:
import {
BasicTreeNodeComponent,
defaultTreeControllerOptions,
defaultTreeData,
useTreeController,
useTreeShortcuts,
useTreeState,
} from 'react-bootstrap-tree-editor';
Inside your function component:
const treeOptions = defaultTreeControllerOptions;
const [tree, setTree] = useTreeState(defaultTreeData);
const treeController = useTreeController(tree, setTree, treeOptions);
const shortcuts = useTreeShortcuts(treeController, document);
// Ensure there's always at least one item to edit
React.useEffect(() => {
if (!treeController.tree.hasChildren()) {
const newNodeData = treeController.options.createNewData();
const node = treeController.mutations.addChildNodeData(treeController.tree, newNodeData);
treeController.focus.setFocusedNode(node);
}
}, [treeController.focus, treeController.mutations, treeController.tree, treeController.options]);
Render the component:
<BasicTreeNodeComponent
node={treeController.tree}
treeController={treeController}
editable={true}
shortcuts={shortcuts}
showBullets={false}
showPointer={false}
/>
Type definitions have been included for TypeScript support.
Favicon by Twemoji.
Open source software is awesome and so are you. π
Feel free to submit a pull request for bugs or additions, and make sure to update tests as appropriate. If you find a mistake in the docs, send a PR! Even the smallest changes help.
For major changes, open an issue first to discuss what you'd like to change.
β Found It Helpful? Star It!
If you found this project helpful, let the community know by giving it a star: πβ
See LICENSE.md.