Is there any free library that I can use to make tree view structure in react JS

2.3k views Asked by At

I want to make a tree view structure in React JS. I already use the package "goJS" but I am facing some issues in it. As the price of this package is very high so I can't purchase it.

The issue is that whenever I minimize the parent node it shifts to the left side and also I am unable to inspect the tree view.

I am also attaching the screenshot of my desired structure. Also I am performing some basic actions on each node and minimizing and expanding each node. Can anybody please help out !

enter image description here

2

There are 2 answers

0
PierreB On BEST ANSWER

At my job we implemented a similar view within our react front-end app using @visx/hierarchy, which is based on d3-hierarchy. I suggest you check the examples, they have some similar results than the image you linked, especially on the link types example.

Be aware that it's not an "out-of-the-box" solution, it'll require some work to obtain the exact result you want but the library will make it easier to compute the various nodes positions in a hierarchical layout.

1
Andy Leong On

You can use MUI for your tree view structure. https://mui.com/material-ui/react-tree-view/ Good luck.