React Tree Graph — Render Your Data as a Tree Using SVG

React Tree Graph — Render Your Data as a Tree Using SVG

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 :)

react-tree-graph
Generates a tree graph from data
npmjs.com

nidhinkumar06/Reacttreegraph
*POC of React Tree Graph plugin. Contribute to nidhinkumar06/Reacttreegraph development by creating an account on…*
github.com