# 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**

```javascript
{
"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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055486058/2a819bfc-11ad-4ba4-ab95-b2049a0c141a.jpeg align="left")

### 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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055487584/8c6d3987-1cfe-4d44-8be2-d8685904c9da.jpeg align="left")

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055488995/9bf7a0e0-66c8-4712-9157-733090457973.jpeg align="left")

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

<iframe src="https://www.youtube.com/embed/CTxuP3aak2A?feature=oembed" width="700" height="393"></iframe>

### 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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698055490595/51bf08e0-8bdb-465b-97c4-e95c701f3d92.jpeg align="left")

### 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

<iframe src="https://www.youtube.com/embed/tdJ4M_S7zoc?feature=oembed" width="700" height="393"></iframe>

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 data*www.npmjs.com](https://www.npmjs.com/package/react-tree-graph)

#### Git Link

[**nidhinkumar06/Reacttreegraph**  
\*POC of React Tree Graph plugin. Contribute to nidhinkumar06/Reacttreegraph development by creating an account on…\*github.com](https://github.com/nidhinkumar06/Reacttreegraph.git)