{"id":20501975,"url":"https://github.com/jpb12/react-tree-graph","last_synced_at":"2025-05-16T09:06:04.727Z","repository":{"id":48926828,"uuid":"76198719","full_name":"jpb12/react-tree-graph","owner":"jpb12","description":"A react library for generating a graphical tree from data using d3","archived":false,"fork":false,"pushed_at":"2025-01-13T16:36:12.000Z","size":14928,"stargazers_count":199,"open_issues_count":1,"forks_count":38,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-05-07T06:41:20.157Z","etag":null,"topics":["d3","graph","react","svg","tree","ui"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jpb12.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2016-12-11T20:41:37.000Z","updated_at":"2025-03-21T03:34:49.000Z","dependencies_parsed_at":"2023-12-07T12:33:20.583Z","dependency_job_id":"6b648a23-7fd1-41c3-86d2-22e9bfbe401b","html_url":"https://github.com/jpb12/react-tree-graph","commit_stats":{"total_commits":177,"total_committers":5,"mean_commits":35.4,"dds":0.03389830508474578,"last_synced_commit":"b260d8276086a08245cfd0974cdba8535107dba7"},"previous_names":[],"tags_count":41,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpb12%2Freact-tree-graph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpb12%2Freact-tree-graph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpb12%2Freact-tree-graph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpb12%2Freact-tree-graph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jpb12","download_url":"https://codeload.github.com/jpb12/react-tree-graph/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254501558,"owners_count":22081528,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["d3","graph","react","svg","tree","ui"],"created_at":"2024-11-15T19:18:32.063Z","updated_at":"2025-05-16T09:05:59.716Z","avatar_url":"https://github.com/jpb12.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"react-tree-graph [![Github](https://img.shields.io/github/stars/jpb12/react-tree-graph?style=social)](https://github.com/jpb12/react-tree-graph)\n================================================================================================================================================\n\n[![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)\n\nA simple react component which renders data as a tree using svg.\n\nSupports react 16.8+.\n\nCheck out the [examples](https://jpb12.github.io/react-tree-graph) and the [demo](https://jpb12.github.io/tree-viewer/).\n\nOlder Versions\n--------------\n[7.X](https://github.com/jpb12/react-tree-graph/tree/v7.0.6)\n[6.X](https://github.com/jpb12/react-tree-graph/tree/v6.1.0)\n[5.X](https://github.com/jpb12/react-tree-graph/tree/v5.1.1)\n[4.X](https://github.com/jpb12/react-tree-graph/tree/v4.1.1)\n[3.X](https://github.com/jpb12/react-tree-graph/tree/v3.3.0)\n[2.X](https://github.com/jpb12/react-tree-graph/tree/v2.0.0)\n[1.X](https://github.com/jpb12/react-tree-graph/tree/v1.7.2)\n\nInstallation\n----------\n```sh\nnpm install react-tree-graph --save\n```\n\nUsage\n-----\n\n```javascript\nimport { Tree } from 'react-tree-graph';\n\nconst data = {\n\tname: 'Parent',\n\tchildren: [{\n\t\tname: 'Child One'\n\t}, {\n\t\tname: 'Child Two'\n\t}]\n};\n\n\u003cTree\n\tdata={data}\n\theight={400}\n\twidth={400}/\u003e);\n\nimport { AnimatedTree } from 'react-tree-graph';\n\n\u003cAnimatedTree\n\tdata={data}\n\theight={400}\n\twidth={400}/\u003e);\n```\n\nIf you are using webpack, and have [css-loader](https://www.npmjs.com/package/css-loader), you can include some default styles with:\n\n```javascript\nimport 'react-tree-graph/dist/style.css'\n```\n\nAlternatively, both the JavaScript and CSS can be included directly from the dist folder with script tags.\n\nConfiguration\n-------------\n\nTree\n\n| Property | Type | Mandatory | Default | Description |\n|:---|:---|:---|:---|:---|\n| `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). |\n| `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. |\n| `height` | number | yes | | The height of the rendered tree, including margins. |\n| `width` | number | yes | | The width of the rendered tree, including margins. |\n| `direction` | `ltr`,`rtl` | | `ltr` | The direction the tree will be rendered in. Either left-to-right or right-to-left. |\n| `children` | node | | | Will be rendered as children of the SVG, before the links and nodes. |\n| `getChildren` | function(node) | | node =\u003e node.children | A function that returns the children for a node, or null/undefined if no children exist. |\n| `keyProp` | string | | \"name\" | The property on each node to use as a key. |\n| `labelProp` | string | | \"name\" | The property on each node to render as a label. |\n| `nodeShape` | `circle`,`image`,`polygon`,`rect` | | `circle` | The shape of the node icons. |\n| `nodeProps` | object | | `{}` | Props to be added to the `\u003ccircle\u003e`, `\u003cimage\u003e`, `\u003cpolygon\u003e` or `\u003crect\u003e` element. These will take priority over the default `r` added to `circle` and `height`, `width`, `x` and `y` added to `image` and `rect`. |\n| `gProps` | object | | `{ className: 'node' }` | Props to be added to the `\u003cg\u003e` element. The default className will still be applied if a className property is not set. |\n| `pathProps` | object | | `{ className: 'link' }` | Props to be added to the `\u003cpath\u003e` element. The default className will still be applied if a className property is not set. |\n| `pathFunc` | function(x1,y1,x2,y2) | | curved | Function to calculate the co-ordinates of the path between nodes. |\n| `svgProps` | object | | `{}` | Props to be added to the `\u003csvg\u003e` element. |\n| `textProps` | object | | `{}` | Props to be added to the `\u003ctext\u003e` element. |\n\nAnimatedTree has the following properties in addition to the above.\n\n| Property | Type | Mandatory | Default | Description |\n|:---|:---|:---|:---|:---|\n| `duration` | number | | 500 | The duration in milliseconds of animations. |\n| `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. |\n| `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. |\n\n### Events\n\nEvent handlers in `nodeProps`, `gProps` and `textProps` will be called with the node ID as an additional parameter.\n\n`function(event, nodeId) { ... }`\n\nEvent handlers in `pathProps` will be called with the source and target node IDs as additional parameters.\n\n`function(event, sourceNodeId, targetNodeId) { ... }`\n\n### Overriding props\n\nThe following properties can also be overridden by setting then for individual nodes.\n\n| Global Prop | Node Prop |\n|:---|:---|\n| `keyProp` | `keyProp` |\n| `labelProp` | `labelProp` |\n| `nodeShape` | `shape` |\n\nThe 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.\n\n| Prop | Description |\n|:---|:---|\n| `nodeProps` | |\n| `gProps` | |\n| `pathProps` | Props for a path are taken from the target node. |\n| `textProps` | |\n\nTypeScript\n----------\n\n[Type definitions](https://www.npmjs.com/package/@types/react-tree-graph) are available as a separate package. (thanks @PCOffline)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjpb12%2Freact-tree-graph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjpb12%2Freact-tree-graph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjpb12%2Freact-tree-graph/lists"}