Welcome to React Tree Vis 👋

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

$3

$3

$3

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

$3

``sh


Yarn

yarn add react-tree-vis

NPM

npm install react-tree-vis
`

$3

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

`js
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 (



)
}
`

$3

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

#### Props

| Prop | Type | Required | Description |
| ------------ | ----------------------------- | -------- | ----------------------------------------------------------------------------------------- |
| ref | React.MutableRefObject | :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.

$3

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

#### Usage

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

const tree = useTree()
`

It returns an object with the following properties.

| Property | Type | Description |
| -------------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
| ref | React.MutableRefObject | 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

$3

`sh
yarn install
`

$3

`sh
yarn storybook
`

$3

`sh
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.