react-tree-vis

Welcome to React Tree Vis 👋

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

:video_game: Code Sandbox

✨ Storybook

:gift: NPM

Features

• :package: Only 4kb minified & gzipped / no dependencies
• :hammer_and_wrench: Perform tree operations with a simple function call
• :rocket: Components made with only JSX and CSS
• :nail_care: Make the components of your own with styling options

Data Structures Covered

• Binary Search Tree

Trie, AVL Tree and more coming soon :see_no_evil:

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 numbers 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 below! Also, I would recommend checking out other similar libraries too.

Documentation

Installation

# Yarn
yarn add react-tree-vis

# NPM
npm install react-tree-vis

Quick start

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

import { BinarySearchTree, useTree } from 'react-tree-vis'
import { useState } from 'react'

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

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

BinarySearchTree

It organizes numbers in a binary search tree and exposes various styling options.

Props

Prop	Type	Required	Description
ref	React.MutableRefObject<any>	:x:	Allows interaction with BST component. ref object passed, is obtained from useTree().
data	number[]	:x:	Elements in the array are inserted into the tree on mount.
treeStyles	object	:x:	Allows overriding default style of the component.

treeStyles object

An object with properties described below can be passed to treeStyles prop to override default styles.

Property	Type	Description	Default
lineColor	string	Color of the line connecting nodes	#ccc
lineHoverColor	string	Hover color of the line connecting nodes	#5f6674
lineRadius	string	Radius of curves in the line	5px
nodeBorder	string	Border style of the nodes. Syntax of short-hand CSS border property is accepted here.	none
nodeBorderRadius	string	Border radius of the nodes	200px
nodeBackgroundColor	string	Background color of the nodes	#fff
nodeShadow	string	Shadow property of the nodes. Syntax of short-hand CSS shadow property accepted here.	-5px -5px 20px #fff, 5px 5px 20px #babecc
nodeFontColor	string	Font color of the text inside the nodes	#666
nodeTextShadow	string	Font shadow of text inside the nodes.	none
nodeHighlightBorder	string	Border style of the highlighted nodes*. Syntax of short-hand CSS border property is accepted here.	none
nodeHighlightBackgroundColor	string	Background color of the highlighted nodes	#fff
nodeHighlightShadow	string	Shadow property of the highlighted nodes. Syntax of short-hand CSS shadow property accepted here.	-5px -5px 20px #fff, 5px 5px 20px #babecc
nodeHighlightFontColor	string	Font color of the text inside the highlighted nodes	#fff
nodeHighlightTextShadow	string	Font shadow of text inside the highlighted nodes.	0 0 5px #fff, 0 0 10px #fff, 0 0 15px #00ff15, 0 0 20px #00ff15, 0 0 25px #00ff15, 0 0 30px #00ff15, 0 0 35px #00ff15
nodeHoverBorder	string	Border style of the hovered nodes. Syntax of short-hand CSS border property is accepted here.	none
nodeHoverBackgroundColor	string	Background color of the hovered nodes	#fff
nodeHoverShadow	string	Shadow property of the hovered nodes. Syntax of short-hand CSS shadow property accepted here.	-1px -1px 5px #fff, 1px 1px 5px #babecc
nodeHoverFontColor	string	Font color of the text inside the hovered nodes	#002574
nodeHoverTextShadow	string	Font shadow of text inside the hovered nodes.	none
nodeNullFontColor	string	Font color of the null nodes	#7c7c7c2f
nodeNullHoverFontColor	string	Font color of the hovered null nodes	#ff0000b9
transitionDuration	string	CSS transition duration	0.5s

* Nodes searched successfully in the tree are highlighted.

This story allows you to play around with styles! (Refresh to apply styles. Working on improving UX here. Here is a rabbit for inconvenience caused. :rabbit:)

Feel styling options are limited? You can always override them with CSS. All the tree components are given id react-tree-vis. Refer to this CSS file for selectors. Also check out this codesandbox example.

useTree()

This hook allows you to interact with your tree. Insert, remove, search and so much more!

Usage

import { useTree } from 'react-tree-vis'

const tree = useTree()

It returns an object with the following properties.

Property	Type	Description
ref	React.MutableRefObject<any>	Pass this ref object to your tree component. It binds the functions returned by this hook to that component.
insert	(value: number) => void	Inserts the value
remove	(value: number) => boolean	removes the value
search	(value: number) => boolean	Searches the value and return true if found. Also, node found is highlighted
getData	(traversalOrder: TraversalOrderType) => number[]*	Return traversal of the tree
clear	() => void	Removes all nodes
balance	() => void	Balances the tree
generateRandomTree	(countOfNodes: number) => void	Removes all nodes and inserts countOfNodes random values.
checkTreeType	() => BinaryTreeCheckType[]**	Checks whether the current tree is balanced, complete, perfect or full

* TraversalOrderType = 'inorder' | 'postorder' | 'preorder'

** BinaryTreeCheckType = 'balanced' | 'complete' | 'perfect' | 'full'

Development

Install

yarn install

Develop

yarn storybook

Run tests

yarn test

Author

👤 Vandan Rogheliya

• Twitter: @vandan_roghelia
• Github: @VandanRogheliya
• LinkedIn: @vandanrogheliya

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2021 Vandan Rogheliya.
This project is MIT licensed.