{"id":13515514,"url":"https://github.com/flavioschneider/graphire","last_synced_at":"2025-04-06T21:14:49.535Z","repository":{"id":45960242,"uuid":"418543090","full_name":"flavioschneider/graphire","owner":"flavioschneider","description":"An unopinionated react graph visualization library.","archived":false,"fork":false,"pushed_at":"2021-11-24T10:39:05.000Z","size":2482,"stargazers_count":280,"open_issues_count":0,"forks_count":10,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-03-30T20:12:25.366Z","etag":null,"topics":["graph","hooks","network","react","visualization"],"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/flavioschneider.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-10-18T14:41:45.000Z","updated_at":"2025-02-03T12:47:35.000Z","dependencies_parsed_at":"2022-09-26T18:41:27.828Z","dependency_job_id":null,"html_url":"https://github.com/flavioschneider/graphire","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/flavioschneider%2Fgraphire","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flavioschneider%2Fgraphire/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flavioschneider%2Fgraphire/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flavioschneider%2Fgraphire/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flavioschneider","download_url":"https://codeload.github.com/flavioschneider/graphire/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247550689,"owners_count":20956987,"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":["graph","hooks","network","react","visualization"],"created_at":"2024-08-01T05:01:12.281Z","updated_at":"2025-04-06T21:14:49.510Z","avatar_url":"https://github.com/flavioschneider.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\n\u003cimg src=\"markdown/logo.png\"\u003e\n \n[![NPM](https://img.shields.io/npm/v/graphire?style=flat\u0026colorA=0f0f0f\u0026colorB=0f0f0f)](https://www.npmjs.com/package/graphire) \n[![NPM](https://img.shields.io/bundlephobia/minzip/graphire?label=minzip\u0026style=flat\u0026colorA=0f0f0f\u0026colorB=0f0f0f)](https://www.npmjs.com/package/graphire)\n[![Downloads](https://img.shields.io/npm/dt/graphire?style=flat\u0026colorA=0f0f0f\u0026colorB=0f0f0f)](https://www.npmjs.com/package/graphire)\n\n```bash\nnpm install graphire\n```\n\n### What is it?\nGraphire is a declarative and unopinionated graph visualization library for React. It supports different layouts to visualize large dynamic networks of nodes and links in both 2D and 3D. \n\n### How does it work?\nInternally it stores the graph using a bidirectional adjacency list that allows fast insertion, deletion, and iteration. It then exposes a `Graph` wrapper and two essential hooks: `useNode` and `useLink`. Those will help you to update the node and links position in an unopinionated way. \n\n### Unopinionated?\nIt means that you can choose nodes and links to be anything you like: a `\u003ccircle\u003e`/`\u003cline\u003e` (SVGs), `\u003cdiv\u003e`, `\u003ccanvas\u003e`, `\u003cmesh\u003e`/instanced mesh (ThreeJS with R3F). The exposed hooks will only care for positioning. It will be up to you to decide how to display and style the nodes and links. \n\n### Why?\nSome graph/network visualization libraries like D3.js are not made to work with React, hence uncomfortable to use. Other libraries are made for React but do not decouple styling from positioning, making it hard to customize. Graphire solves that. And it's _fast_.\n\n\n# [Documentation](https://github.com/flavioschneider/graphire/wiki) \n\n# Examples \n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd width='50%'\u003e \n      \u003ca href=\"https://codesandbox.io/s/graphire-svg-simple-graph-example-eftpc?file=/src/App.js:184-633\"\u003e\u003cimg src=\"markdown/svg-example.png\"\u003e\u003c/a\u003e\n      Simple example using SVGs (no layout).\n    \u003c/td\u003e\n    \u003ctd width='50%'\u003e\n      \u003ca href=\"https://codesandbox.io/s/graphire-svg-bubble-example-e33ss\"\u003e\u003cimg src=\"markdown/svg-bubble-example.png\"\u003e\u003c/a\u003e\n      Bubble example using SVGs (layout force).\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd width='50%'\u003e\n      \u003ca href=\"https://codesandbox.io/s/graphire-forcelayout-example-jet3q\"\u003e\u003cimg src=\"markdown/preview.png\"\u003e\u003c/a\u003e\n      Graph example in 3D with react-three-fiber (Three.js) using very efficient node instancing and segments (layout force).\n    \u003c/td\u003e\n    \u003ctd width='50%'\u003e\n      \u003ca href=\"https://codesandbox.io/s/graphire-drag-drop-r3f-uski3\"\u003e\u003cimg src=\"markdown/dragdrop-example.gif\"\u003e\u003c/a\u003e\n      Drag and drop nodes with @use-gesture and react-three-fiber (no layout).\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n# Basic Usage:\n\n1. Use `Node` and `Link`components  (defined in step 2 and 3) inside an svg by using the `Graph` wrapper.\n\n```jsx\nimport { Graph } from 'graphire'\nconst MyComponent = (\n  return (\n    \u003csvg\u003e\n      \u003cGraph\u003e\n        \u003cNode uid={0} x={110} y={300} color='red'/\u003e\n        \u003cNode uid={1} x={50} y={30} color='orange' /\u003e\n        \u003cNode uid={2} x={150} y={80} color='green' /\u003e\n        \u003cNode uid='k' x={200} y={200} color='blue' /\u003e\n        \u003cNode uid={3} x={400} y={100} color='yellow' /\u003e\n\n        \u003cLink source={0} target={1} /\u003e\n        \u003cLink source={1} target={2} /\u003e\n        \u003cLink source={1} target='k' /\u003e\n        \u003cLink source={3} target='k' /\u003e\n      \u003c/Graph\u003e\n    \u003c/svg\u003e\n  )\n)\n```\n\n2. Build the `Node` component using the `useNode` hook.\n```jsx \nimport { useRef } from 'react'\nimport { useNode } from 'graphire'\n\nconst Node = (props) =\u003e {\n  const { color='black', radius=5, ...rest } = props\n  const ref = useRef()\n  useNode(([cx, cy]) =\u003e {\n    ref.current.setAttribute('cx', cx)  \n    ref.current.setAttribute('cy', cy)  \n  }, rest) \n  return \u003ccircle ref={ref} cx='0' cy='0' r={radius} fill={color} /\u003e\n}\n```\n\n3. Build the `Link` component using the `useLink` hook.\n```jsx \nimport { useRef } from 'react'\nimport { useLink } from 'graphire'\n// Link \nconst Link = (props) =\u003e {\n  const { source, target, color = 'black', ...rest } = props\n  const ref = useRef()\n\n  useLink(([x1, y1], [x2, y2]) =\u003e {\n    ref.current.setAttribute('x1', x1)  \n    ref.current.setAttribute('y1', y1)  \n    ref.current.setAttribute('x2', x2)  \n    ref.current.setAttribute('y2', y2)  \n  }, source, target, rest)\n  return (\n    \u003cline ref={ref} x1='0' y1='0' x2='0' y2='0' stroke={color} strokeWidth={1} /\u003e\n  )\n}\n```\n\n\n\n\n\n\n## Goals:\nShort-term: \n- [ ] -\n\nMedium-term:\n- [ ] Convert to typescript (50% done)\n\nLong-term:\n- [ ] Layout circular  \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflavioschneider%2Fgraphire","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflavioschneider%2Fgraphire","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflavioschneider%2Fgraphire/lists"}