React Tree Vis

Allows you to store and manage information in different tree data structures.

✨ Storybook

🎮 Code Sandbox

🎁 NPM

👽 GitHub

Features

• 📦 Only 11kb minified & gzipped / no dependencies
• 🛠️ Perform tree operations with a simple function call
• 🚀 Components made with only JSX and CSS
• 💅 Make the components of your own with styling options

Data Structures Covered

• Binary Search Tree
• Red Black Tree
• AVL Tree
• Trie
• Min Heap
• Max Heap

Who is this library for?

If you are looking for a way to not just only display your data in a tree format but also interact with it, react-tree-vis might be for you. You can simply pass an array of values to display it or use our API to insert, delete, search and much more. With react-tree-vis, you can style your tree component with props or override with CSS. Everything is documented on storybook! Also, I would recommend checking out other similar libraries too.

Documentation

Installation

# Yarn
yarn add react-tree-vis

# NPM
npm install react-tree-vis

✨ Checkout the stories here for a detailed documentation.

Quick start

We are displaying data in BST and interacting with it using useBinarySearchTree. Play around with this example here.

import { useState } from "react";
import { BinarySearchTree, useBinarySearchTree } from "react-tree-vis";

export default function App() {
  const { ref, insert, remove } = useBinarySearchTree();

  const [insertValue, setInsertValue] = useState(0);
  const [removeValue, setRemoveValue] = useState(0);

  return (
    <div className="App">
      <input
        type="number"
        onChange={(elem) => setInsertValue(parseInt(elem.currentTarget.value))}
      />
      <button onClick={() => insert(insertValue)}>Insert</button>
      <br />
      <input
        type="number"
        onChange={(elem) => setRemoveValue(parseInt(elem.currentTarget.value))}
      />
      <button onClick={() => remove(removeValue)}>Remove</button>

      <BinarySearchTree data={[2, 1, 3]} ref={ref} />
    </div>
  );
}