react-bootstrap-tree-editor
TypeScript icon, indicating that this package has built-in type declarations

1.0.16 • Public • Published

🌲 React Bootstrap Tree Editor

An interactive tree editor built on react-bootstrap.

npm Version  View project on GitHub  Deploy Status

Buy me a coffee Sponsor

👁️ View Demo

Documentation

Read the official documentation.

Overview

An interactive tree editor built on react-bootstrap and powered by versatile-tree.

Features include:

  • 🌲 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.

Donate

If this project helped you, please consider buying me a coffee or sponsoring me. Your support is much appreciated!

Buy me a coffee Sponsor

Table of Contents

Installation

npm i react-bootstrap-tree-editor

Quick Start

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}
/>

TypeScript

Type definitions have been included for TypeScript support.

Icon Attribution

Favicon by Twemoji.

Contributing

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: 👉⭐

License

See LICENSE.md.

Package Sidebar

Install

npm i react-bootstrap-tree-editor

Weekly Downloads

1

Version

1.0.16

License

MIT

Unpacked Size

209 kB

Total Files

36

Last publish

Collaborators

  • justinmahar