JSPM

🌲 React Bootstrap Tree Editor

An interactive tree editor built on react-bootstrap

👁️ View Demo

Documentation

Read the official documentation.

Overview

An interactive tree editor built on react-bootstrap.

Features include:

• 🌲 Interactive tree editing
  • React-Bootstrap powered component for editing trees

Donate

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

Table of Contents

• Documentation
• Overview
  • Features include:
• Donate
• Table of Contents
• Installation
• Quick Start
• TypeScript
• Icon Attribution
• Contributing
• ⭐ Found It Helpful? Star It!
• License

Installation

npm i react-bootstrap-tree-editor

Quick Start

The following will get you up and running quickly with this library. It's highly recommended you check out the demo and its source once you have the component rendering in your application.

Import the following:

import { defaultTreeControllerOptions } from '../hooks/TreeControllerOptions';
import { useTreeController } from '../hooks/useTreeController';
import { useTreeShortcuts } from '../hooks/useTreeShortcuts';
import { defaultTreeData, useTreeState } from '../hooks/useTreeState';
import { BasicTreeNodeComponent } from './BasicTreeNodeComponent';

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.