✨Crafting Code with a Smile for 8 Years:) Merging the Formal Dance of Angular, the Playful Rhythms of React, and the Next-level Moves of Next.js 🚀
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
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 :)
