{"id":17809555,"url":"https://github.com/ldd/react-tech-tree","last_synced_at":"2025-03-17T17:30:39.028Z","repository":{"id":52189125,"uuid":"252372734","full_name":"ldd/react-tech-tree","owner":"ldd","description":"React visual tree components. Demo: https://ldd.github.io/react-tech-tree/","archived":false,"fork":false,"pushed_at":"2020-08-23T17:04:51.000Z","size":3501,"stargazers_count":26,"open_issues_count":4,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-28T02:10:18.143Z","etag":null,"topics":["javascript","no-dependencies","react","react-component","tech-tree","tree"],"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/ldd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-02T06:23:00.000Z","updated_at":"2024-12-23T21:45:42.000Z","dependencies_parsed_at":"2022-09-19T12:10:43.011Z","dependency_job_id":null,"html_url":"https://github.com/ldd/react-tech-tree","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ldd%2Freact-tech-tree","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ldd%2Freact-tech-tree/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ldd%2Freact-tech-tree/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ldd%2Freact-tech-tree/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ldd","download_url":"https://codeload.github.com/ldd/react-tech-tree/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243871904,"owners_count":20361380,"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":["javascript","no-dependencies","react","react-component","tech-tree","tree"],"created_at":"2024-10-27T15:19:46.781Z","updated_at":"2025-03-17T17:30:38.625Z","avatar_url":"https://github.com/ldd.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-tech-tree\n\n[![NPM](https://img.shields.io/npm/v/react-tech-tree.svg)](https://www.npmjs.com/package/react-tech-tree)\n[![Build Status](https://travis-ci.com/ldd/react-tech-tree.png?branch=master)](https://travis-ci.com/ldd/react-tech-tree)\n[![Coverage Status](https://coveralls.io/repos/github/ldd/react-tech-tree/badge.svg?branch=master)](https://coveralls.io/github/ldd/react-tech-tree?branch=add-tests)\n[![Dependencies](https://david-dm.org/ldd/react-tech-tree.svg)](https://david-dm.org/ldd/react-tech-tree)\n[![Size](https://badgen.net/bundlephobia/minzip/react-tech-tree)](https://bundlephobia.com/result?p=react-tech-tree@0.5.1)\n\nCreate highly customizable tech trees (or generic graphical trees)\n\n![superheroes tree](https://raw.githubusercontent.com/ldd/react-tech-tree/master/example/public/gifs/x_men.gif)\n\n## Features\n\n- Light\n  - Zero dependencies (besides react)\n  - Tree-shaking ready\n  - \u003c 2Kb gzipped\n- Responsive\n  - works on mobile, desktop, etc\n- Image Support\n  - sprite sheets (e.g: [TexturePacker](https://www.codeandweb.com/texturepacker))\n  - individual images\n- Customizable\n\n  - style links and nodes\n  - ready to [use](https://github.com/ldd/react-tech-tree/tree/master/example/src/trees/text_tooltip/index.js) with [react-tooltip](https://github.com/wwayne/react-tooltip), etc\n  - [good examples](https://github.com/ldd/react-tech-tree/tree/master/example/src/trees)\n\n## Installation\n\n- npm: `npm install --save react-tech-tree`\n- yarn: `yarn add react-tech-tree`\n\n## Usage\n\n```jsx\nimport React from \"react\";\n\nimport { Tree } from \"react-tech-tree\";\nimport \"react-tech-tree/dist/index.css\";\n\nconst nodes = [\n  [\n    { id: \"A0\", name: \"A\" },\n    { id: \"B0\", name: \"B\" }\n  ]\n];\nconst links = [{ from: \"A0\", to: \"B0\" }];\n\nfunction ExampleComponent() {\n  return \u003cTree nodes={nodes} links={links} /\u003e;\n}\n```\n\n## Options\n\n### _Tree_\n\n```js\nimport { Tree } from \"react-tech-tree\";\n```\n\n| Prop        | Type                            | Description                                                                                                        |\n| ----------- | ------------------------------- | ------------------------------------------------------------------------------------------------------------------ |\n| id          | `string`                        | id property (should be unique). E.g: [uuuid](https://github.com/uuidjs/uuid)                                       |\n| nodes       | `{id:string, name: string}[][]` | 2d array with nodes information                                                                                    |\n| links       | `{from:string, to: string}[]`   | array with links information                                                                                       |\n| NodeElement | `ReactElement`                  | _(optional)_ React Element to be used as Node. Defaults to [`Node`](https://github.com/ldd/react-tech-tree/#node). |\n| nodeProps   | `object`                        | _(optional)_ Properties to pass down to Node elements. See [`Node`](https://github.com/ldd/react-tech-tree/#node). |\n| linkProps   | `object`                        | _(optional)_ See below.                                                                                            |\n\n#### linkProps\n\n| Prop      | Type                                            | Description                                                                                                                              |\n| --------- | ----------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |\n| pathMaker | `(r0: Rect,r1: Rect, props?: object) =\u003e string` | _(optional)_ Function to generate string paths. Defaults to [`simplePathMaker`](https://github.com/ldd/react-tech-tree/#simplePathMaker) |\n\n### _Node_\n\n```js\nimport { Node } from \"react-tech-tree\";\n```\n\n| Prop    | Type                      | Description                                                                                                                                                                |\n| ------- | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| onClick | `(e: MouseEvent) =\u003e void` | _(optional)_ Event Handler fired when the Node is clicked. Defaults to [`nodeClickHandler`](https://github.com/ldd/react-tech-tree/tree/document-helpers#nodeClickHandler) | styleName | () =\u003e `object` | function to style the Node from its name. [Example](https://github.com/ldd/react-tech-tree/blob/master/example/src/trees/superhero/index.js#L18) |\n\n### _Sprite_\n\n```js\nimport { Sprite } from \"react-tech-tree\";\n```\n\n| Prop      | Type           | Description                                                                                                                                        |\n| --------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |\n| name      | `string`       | name of spritesheet entry or image name for this Sprite                                                                                            |\n| styleName | () =\u003e `object` | function to style the Sprite from its name. [Example](https://github.com/ldd/react-tech-tree/blob/master/example/src/trees/superhero/index.js#L18) |\n\n### _Link_\n\n```js\nimport { Link } from \"react-tech-tree\";\n```\n\n| Prop     | Type     | Description                             |\n| -------- | -------- | --------------------------------------- |\n| pathData | `string` | data to build links. E.g: `M 0 0 L 1 1` |\n\n### _helpers_\n\n#### nodeClickHandler\n\n```js\nimport { nodeClickHandler } from \"react-tech-tree\";\n```\n\nclickHandler function used by [`Node`](https://github.com/ldd/react-tech-tree/#node) internally.\nUse it when you are trying to build a custom `NodeElement` that you pass to a [`Tree`](https://github.com/ldd/react-tech-tree/#tree).\n\nIt will:\n\n- mark `Node` with class `active`\n- mark `Node's children` with class `next-active`\n\n```jsx\n//...\n\nfunction MyNodeElement({ name, id }) {\n  return (\n    \u003cbutton id={id} onClick={nodeClickHandler}\u003e\n      {name}\n    \u003c/button\u003e\n  );\n}\n\nfunction ExampleComponent() {\n  return \u003cTree nodes={nodes} links={links} NodeElement={MyNodeElement} /\u003e;\n}\n```\n\n#### prepareSpritesheetStyle\n\n```js\nimport { prepareSpritesheetStyle } from \"react-tech-tree\";\n```\n\nWhen using spritesheets, you may need to style each [`Sprite`](https://github.com/ldd/react-tech-tree/#sprite) based on its name.\n\nIf you are using [TexturePacker](https://www.codeandweb.com/texturepacker), you can use this function as follows:\n\n```jsx\n//...\nimport spriteInformation from \"./data/spritesheet.json\";\nimport spriteImage from \"./data/spritesheet.png\";\n//...\n\nconst nodeProps = {\n  styleName: prepareSpritesheetStyle(spriteImage, spriteInformation)\n};\n\nfunction ExampleComponent() {\n  return \u003cTree nodes={nodes} links={links} nodeProps={nodeProps} /\u003e;\n}\n```\n\n#### simplePathMaker\n\n```js\nimport { simplePathMaker } from \"react-tech-tree\";\n```\n\nPure function that return a string path between the center of two rectangles.\n\n```js\nconst rect0 = { x: 0, y: 24, width: 4, height: 4 };\nconst rect1 = { x: 8, y: 32, width: 2, height: 2 };\nconst path = simplePathMaker(rect0, rect1);\n// \"M 2 26 L 9 33\"\n```\n\nIt is used at the default value for building links between `Nodes`.\nIt can be passed down in `linkProps` to a [`Tree`](https://github.com/ldd/react-tech-tree/#tree). See [example](https://github.com/ldd/react-tech-tree/blob/master/example/src/trees/superhero/linkHelper.js)\n\n```jsx\n//...\n\nconst linkProps = { pathMaker: simplePathMaker };\n\nfunction ExampleComponent() {\n  return \u003cTree nodes={nodes} links={links} linkProps={linkProps} /\u003e;\n}\n```\n\n## Tips\n\nFor further usage, go to the [examples page](https://github.com/ldd/react-tech-tree/tree/master/example/src/trees)\n\n## Inspiration\n\n- [tech-tree](https://github.com/ldd/tech-tree-js)\n  - vanilla javascript project I made a _long_ time ago\n\n## License\n\nMIT © [ldd](https://github.com/ldd)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fldd%2Freact-tech-tree","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fldd%2Freact-tech-tree","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fldd%2Freact-tech-tree/lists"}