React interactive tree visualization library.
npm install react-tree-vis

> Allows you to store and manage information in different tree data structures.
- :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
- Binary Search Tree
> Trie, AVL Tree and more coming soon :see_no_evil:
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.
``shYarn
yarn add 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 (
type="number"
onChange={(elem) => setInsertValue(parseInt(elem.currentTarget.value))}
/>
type="number"
onChange={(elem) => setRemoveValue(parseInt(elem.currentTarget.value))}
/>
)
}
`$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 objectAn 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
``š¤ Vandan Rogheliya
- Twitter: @vandan_roghelia
- Github: @VandanRogheliya
- LinkedIn: @vandanrogheliya
Give a āļø if this project helped you!
Copyright Ā© 2021 Vandan Rogheliya.
This project is MIT licensed.