Overview
React Tree graph is a component which renders data as a tree using SVG
Objectives
Installing React Tree Graph Component
Customizing Tree Graph
Tree Graph Click Events
Custom Path props
Tree view animation
Project Creation
Let’s begin by creating a React app using the command below
create-react-app tree-view cd tree-view npm start
If you would like to use TypeScript for your React application, then use the command below
create-react-app tree-view --typescript cd tree-view npm start
1. Installing React Tree Graph Component
Now we will install the react-tree-graph
component using the below command
npm install react-tree-graph --save
If you are using TypeScript, then you need to add the types for the component. Unfortunately, the react-tree-graph
doesn’t have the types to install so we need to declare a module like below
Create a new folder named types
in src->types
and then create a new file named AllTypes.d.ts
and add the below code.
declare module 'react-tree-graph';
Click Save and then go to tsconfig.json and add the below code in compiler options
{
"compilerOptions": {
.......
"typeRoots": ["./src/types"]
},
....
}
Now we will add the code in App.tsx
. First, replace the default code available in App.tsx
with the below code
Run the project using the command npm start
and your output will be like below
2. Customizing Tree Graph
Now we will customize the tree graph by adding more data and custom colors for the paths.
Create a file named data.ts
and add the below code
In App.tsx
replace the old code with the new one like below
Replace App.css
and create new styles and add the below code
Now run the project to see the following output
Now we will customize the tree graph by showing the text in below for the parent node **Color**
and increase the icon size using **nodeRadius**
In data.ts
add textProps: {x: -25, y: 25}
for all the nodes and children and in App.tsx
add the props for Tree component like below
Now run the project and you could see the output
3. Tree Graph Click Events
If we want to do some operation while clicking a child in the tree, we can do it using gProps.onClick
as the following code shows
And your output be:
4. Custom path props
If you would like to have custom styles for your paths you can do it using the path props by setting the class name and passing the value and in CSS define the class name like below
And in data.ts add, a new property called pathProps
and define a className
in pathProps
as shown below
pathProps: {className: 'red'}
Save and run the project. Your output will be like
5. Animated Tree Graph
If you want your tree graph with animation simply add animated
in the <Tree />
component.
click Save and run the project you will see the animation like below
Congratulations you have created tree graph in react with custom styles and animation. Explore more with the plugin. Happy coding :)
Reference Link
react-tree-graph
Generates a tree graph from datanpmjs.com
Git Link
nidhinkumar06/Reacttreegraph
*POC of React Tree Graph plugin. Contribute to nidhinkumar06/Reacttreegraph development by creating an account on…*github.com