# react-tree-graph > A react library for generating a graphical tree from data using d3 Latest version **8.0.3** (published 2025-01-13) · MIT license · 0 weekly downloads ## Install ```sh npm install react-tree-graph pnpm add react-tree-graph yarn add react-tree-graph bun add react-tree-graph ``` ## Health **Score 38/100 (D)** — status: maintenance-mode. Positive: has types package; esm support; no vulnerabilities; high quality score. Warnings: low downloads. Negative: stale; low maintenance score. ## Facts | | | |---|---| | Version | 8.0.3 | | Published | 2025-01-13 | | First published | 2016-12-11 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | separate (@types/react-tree-graph) | | Module format | ESM + CommonJS | | Dependencies | 3 | | Unpacked size | 50.8 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 203 | | Author | James Brierley | | Maintainers | jpb12 | | Keywords | d3, graph, react, svg, tree, ui | ## Links - npm: https://www.npmjs.com/package/react-tree-graph - Repository: https://github.com/jpb12/react-tree-graph - Homepage: https://jpb12.github.io/react-tree-graph - Issues: https://github.com/jpb12/react-tree-graph/issues - npm.io page: https://npm.io/package/react-tree-graph ## Dependencies (3) - [d3-ease](https://npm.io/package/d3-ease.md) ^2.0.0 - [d3-hierarchy](https://npm.io/package/d3-hierarchy.md) ^2.0.0 - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.26.0 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 8.0.3 (latest) — 2025-01-13 - 8.0.2 — 2024-04-30 - 8.0.1 — 2023-01-10 - 8.0.0 — 2022-10-25 - 7.0.6 — 2022-10-21 - 7.0.5 — 2022-10-21 - 7.0.4 — 2022-10-21 - 7.0.3 — 2022-02-11 - 7.0.2 — 2022-02-09 - 7.0.1 — 2022-02-09 - 7.0.0 — 2022-01-10 - 6.1.0 — 2021-11-29 - 6.0.1 — 2021-06-17 - 6.0.0 — 2021-02-09 - 5.1.1 — 2021-02-08 - … 26 more at https://npm.io/package/react-tree-graph/versions ## README react-tree-graph [![Github](https://img.shields.io/github/stars/jpb12/react-tree-graph?style=social)](https://github.com/jpb12/react-tree-graph) ================================================================================================================================================ [![Build Status](https://img.shields.io/github/actions/workflow/status/jpb12/react-tree-graph/build.yml)](https://github.com/jpb12/react-tree-graph/actions/workflows/build.yml?query=branch%3Amaster) [![Coverage Status](https://coveralls.io/repos/github/jpb12/react-tree-graph/badge.svg?branch=master)](https://coveralls.io/github/jpb12/react-tree-graph?branch=master) [![npm version](https://img.shields.io/npm/v/react-tree-graph.svg)](https://www.npmjs.com/package/react-tree-graph) [![npm](https://img.shields.io/npm/dt/react-tree-graph.svg)](https://www.npmjs.com/package/react-tree-graph) [![bundle size](https://img.shields.io/bundlephobia/minzip/react-tree-graph)](https://bundlephobia.com/result?p=react-tree-graph) [![license](https://img.shields.io/npm/l/react-tree-graph)](https://github.com/jpb12/react-tree-graph/blob/master/LICENSE) [![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@main/badge/badge-storybook.svg)](https://jpb12.github.io/react-tree-graph) A simple react component which renders data as a tree using svg. Supports react 16.8+. Check out the [examples](https://jpb12.github.io/react-tree-graph) and the [demo](https://jpb12.github.io/tree-viewer/). Older Versions -------------- [7.X](https://github.com/jpb12/react-tree-graph/tree/v7.0.6) [6.X](https://github.com/jpb12/react-tree-graph/tree/v6.1.0) [5.X](https://github.com/jpb12/react-tree-graph/tree/v5.1.1) [4.X](https://github.com/jpb12/react-tree-graph/tree/v4.1.1) [3.X](https://github.com/jpb12/react-tree-graph/tree/v3.3.0) [2.X](https://github.com/jpb12/react-tree-graph/tree/v2.0.0) [1.X](https://github.com/jpb12/react-tree-graph/tree/v1.7.2) Installation ---------- ```sh npm install react-tree-graph --save ``` Usage ----- ```javascript import { Tree } from 'react-tree-graph'; const data = { name: 'Parent', children: [{ name: 'Child One' }, { name: 'Child Two' }] }; ); import { AnimatedTree } from 'react-tree-graph'; ); ``` If you are using webpack, and have [css-loader](https://www.npmjs.com/package/css-loader), you can include some default styles with: ```javascript import 'react-tree-graph/dist/style.css' ``` Alternatively, both the JavaScript and CSS can be included directly from the dist folder with script tags. Configuration ------------- Tree | Property | Type | Mandatory | Default | Description | |:---|:---|:---|:---|:---| | `data` | object | yes | | The data to be rendered as a tree. Must be in a format accepted by [d3.hierarchy](https://github.com/d3/d3-hierarchy/blob/master/README.md#hierarchy). | | `margins` | object | | `{ bottom : 10, left : 20, right : 150, top : 10}` | The margins around the content. The right margin should be larger to include the rendered label text. | | `height` | number | yes | | The height of the rendered tree, including margins. | | `width` | number | yes | | The width of the rendered tree, including margins. | | `direction` | `ltr`,`rtl` | | `ltr` | The direction the tree will be rendered in. Either left-to-right or right-to-left. | | `children` | node | | | Will be rendered as children of the SVG, before the links and nodes. | | `getChildren` | function(node) | | node => node.children | A function that returns the children for a node, or null/undefined if no children exist. | | `keyProp` | string | | "name" | The property on each node to use as a key. | | `labelProp` | string | | "name" | The property on each node to render as a label. | | `nodeShape` | `circle`,`image`,`polygon`,`rect` | | `circle` | The shape of the node icons. | | `nodeProps` | object | | `{}` | Props to be added to the ``, ``, `` or `` element. These will take priority over the default `r` added to `circle` and `height`, `width`, `x` and `y` added to `image` and `rect`. | | `gProps` | object | | `{ className: 'node' }` | Props to be added to the `` element. The default className will still be applied if a className property is not set. | | `pathProps` | object | | `{ className: 'link' }` | Props to be added to the `` element. The default className will still be applied if a className property is not set. | | `pathFunc` | function(x1,y1,x2,y2) | | curved | Function to calculate the co-ordinates of the path between nodes. | | `svgProps` | object | | `{}` | Props to be added to the `` element. | | `textProps` | object | | `{}` | Props to be added to the `` element. | AnimatedTree has the following properties in addition to the above. | Property | Type | Mandatory | Default | Description | |:---|:---|:---|:---|:---| | `duration` | number | | 500 | The duration in milliseconds of animations. | | `easing` | function(interval) | | [d3-ease](https://www.npmjs.com/package/d3-ease).easeQuadOut | The easing function for animations. Takes in a number between 0 and 1, and returns a number between 0 and 1. | | `steps` | number | | 20 | The number of steps in animations. A higher number will result in a smoother animation, but too high will cause performance issues. | ### Events Event handlers in `nodeProps`, `gProps` and `textProps` will be called with the node ID as an additional parameter. `function(event, nodeId) { ... }` Event handlers in `pathProps` will be called with the source and target node IDs as additional parameters. `function(event, sourceNodeId, targetNodeId) { ... }` ### Overriding props The following properties can also be overridden by setting then for individual nodes. | Global Prop | Node Prop | |:---|:---| | `keyProp` | `keyProp` | | `labelProp` | `labelProp` | | `nodeShape` | `shape` | The following object properties, if set on individual nodes, will be combined with the object properties set on the tree. If a property exists in both objects, the value from the node will be taken. | Prop | Description | |:---|:---| | `nodeProps` | | | `gProps` | | | `pathProps` | Props for a path are taken from the target node. | | `textProps` | | TypeScript ---------- [Type definitions](https://www.npmjs.com/package/@types/react-tree-graph) are available as a separate package. (thanks @PCOffline) --- _Source: https://npm.io/package/react-tree-graph · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._