{"id":13400608,"url":"https://github.com/pierpo/react-archer","last_synced_at":"2025-05-13T21:08:02.345Z","repository":{"id":30156195,"uuid":"123142926","full_name":"pierpo/react-archer","owner":"pierpo","description":"🏹 Draw arrows between React elements 🖋","archived":false,"fork":false,"pushed_at":"2025-01-21T10:51:44.000Z","size":3981,"stargazers_count":1217,"open_issues_count":33,"forks_count":73,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-05-10T08:34:51.063Z","etag":null,"topics":["arrow","arrows","dom","draw-arrows","react"],"latest_commit_sha":null,"homepage":"https://pierpo.github.io/react-archer/","language":"TypeScript","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/pierpo.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-02-27T14:45:24.000Z","updated_at":"2025-05-06T07:55:51.000Z","dependencies_parsed_at":"2025-02-06T20:03:08.855Z","dependency_job_id":"0e67a784-c0b5-4521-b00f-8da047d627e6","html_url":"https://github.com/pierpo/react-archer","commit_stats":{"total_commits":401,"total_committers":24,"mean_commits":"16.708333333333332","dds":"0.36159600997506236","last_synced_commit":"154a1e289c6afb45a299d5be733be81e883dece2"},"previous_names":[],"tags_count":45,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pierpo%2Freact-archer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pierpo%2Freact-archer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pierpo%2Freact-archer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pierpo%2Freact-archer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pierpo","download_url":"https://codeload.github.com/pierpo/react-archer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254028937,"owners_count":22002282,"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":["arrow","arrows","dom","draw-arrows","react"],"created_at":"2024-07-30T19:00:53.848Z","updated_at":"2025-05-13T21:08:02.261Z","avatar_url":"https://github.com/pierpo.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized","TypeScript","React [🔝](#readme)"],"sub_categories":["Uncategorized"],"readme":"# react-archer\n\n[![CircleCI](https://circleci.com/gh/pierpo/react-archer.svg?style=svg)](https://circleci.com/gh/pierpo/react-archer)\n\n🏹 Draw arrows between DOM elements in React 🖋\n\n## Installation\n\n`npm install react-archer --save` or `yarn add react-archer`\n\n## React-Archer AI Bot\n[React-Archer](https://codeparrot.ai/oracle?owner=pierpo\u0026repo=react-archer) Bot will help you understand this repository better. You can ask for code examples, installation guide, debugging help and much more.\n\n## Example\n\n[Try it out!](https://pierpo.github.io/react-archer/)\n\n![Example](https://raw.githubusercontent.com/pierpo/react-archer/master/example.png)\n\n```javascript\nimport { ArcherContainer, ArcherElement } from 'react-archer';\n\nconst rootStyle = { display: 'flex', justifyContent: 'center' };\nconst rowStyle = { margin: '200px 0', display: 'flex', justifyContent: 'space-between' };\nconst boxStyle = { padding: '10px', border: '1px solid black' };\n\nconst App = () =\u003e {\n  return (\n    \u003cdiv style={{ height: '500px', margin: '50px' }}\u003e\n      \u003cArcherContainer strokeColor=\"red\"\u003e\n        \u003cdiv style={rootStyle}\u003e\n          \u003cArcherElement\n            id=\"root\"\n            relations={[\n              {\n                targetId: 'element2',\n                targetAnchor: 'top',\n                sourceAnchor: 'bottom',\n                style: { strokeDasharray: '5,5' },\n              },\n            ]}\n          \u003e\n            \u003cdiv style={boxStyle}\u003eRoot\u003c/div\u003e\n          \u003c/ArcherElement\u003e\n        \u003c/div\u003e\n\n        \u003cdiv style={rowStyle}\u003e\n          \u003cArcherElement\n            id=\"element2\"\n            relations={[\n              {\n                targetId: 'element3',\n                targetAnchor: 'left',\n                sourceAnchor: 'right',\n                style: { strokeColor: 'blue', strokeWidth: 1 },\n                label: \u003cdiv style={{ marginTop: '-20px' }}\u003eArrow 2\u003c/div\u003e,\n              },\n            ]}\n          \u003e\n            \u003cdiv style={boxStyle}\u003eElement 2\u003c/div\u003e\n          \u003c/ArcherElement\u003e\n\n          \u003cArcherElement id=\"element3\"\u003e\n            \u003cdiv style={boxStyle}\u003eElement 3\u003c/div\u003e\n          \u003c/ArcherElement\u003e\n\n          \u003cArcherElement\n            id=\"element4\"\n            relations={[\n              {\n                targetId: 'root',\n                targetAnchor: 'right',\n                sourceAnchor: 'left',\n                label: 'Arrow 3',\n              },\n            ]}\n          \u003e\n            \u003cdiv style={boxStyle}\u003eElement 4\u003c/div\u003e\n          \u003c/ArcherElement\u003e\n        \u003c/div\u003e\n      \u003c/ArcherContainer\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\n## API\n\n### `ArcherContainer`\n\n#### Props\n\n\u003c!-- prettier-ignore --\u003e\n| Name | Type | Description |\n| - | - | - |\n| `strokeColor` | `string` | A color string `'#ff0000'`\n| `strokeWidth` | `number` | A size in `px`\n| `strokeDasharray` | `string` | Adds dashes to the stroke. It has to be a string representing an array of sizes. See some [SVG strokes documentation](https://www.w3schools.com/graphics/svg_stroking.asp).\n| `noCurves` | `boolean` | Set this to true if you want angles instead of curves\n| `lineStyle` | `string` | Can be one of `angle`, `curve` or `straight`. Setting this overrides `noCurves`.\n| `offset` | `number` | Optional number for space between element and start/end of stroke\n| `svgContainerStyle` | `Style` | Style of the SVG container element. Useful if you want to add a z-index to your SVG container to draw the arrows under your elements, for example.\n| `children` | `React.Node` |\n| `endShape` | `Object` | An object containing the props to configure the \"end shape\" of the arrow. Can be one of `arrow` (default) or `circle`. See [`ShapeType`](flow-typed/archer-types.js) for a complete list of available options.\n| `startMarker` | `boolean` | Optional flag (default `false`) to also add a marker at the start of the arrow.\n| `endMarker` | `boolean` | Optional flag (default `true`) to remove the marker at the end of the arrow.\n\n#### Instance methods\n\nIf you access to the ref of your `ArcherContainer`, you will access the `refreshScreen` method.\nThis will allow you to have more control on when you want to re-draw the arrows.\n\n### `ArcherElement`\n\n\u003c!-- prettier-ignore --\u003e\n| Name | Type | Description |\n| - | - | - |\n| `id` | `string` | The id that will identify the Archer Element.\n| `children` | `React.Node \\| (ArcherContext) =\u003e React.Node` | :warning: Must be a **single** element or a function of the internal context. If you are passing a custom component, it should be wrapped in a div or you should forward the reference (see [this](https://github.com/pierpo/react-archer/releases/tag/v2.0.0))\n| `relations` | `Relation[]` |\n\nThe `Relation` type has the following shape:\n\n```javascript\n{\n  targetId: string,\n  targetAnchor: 'top' | 'bottom' | 'left' | 'right' | 'middle',\n  sourceAnchor: 'top' | 'bottom' | 'left' | 'right' | 'middle',\n  label: React.Node,\n  order?: number, // higher order means arrow will be drawn on top of the others\n  className?: string, // CSS class selectors on the SVG arrow\n  style: ArcherStyle,\n  domAttributes?: DOMAttributes\u003cSVGElement\u003e, // Allows to make selectable arrows by passing dom attributes like onMouseHover\n  cursor?: Property.Cursor, // Allows to customize the hovering cursor of the arrow. Will only work if domAttributes is present\n  hitSlop?: number, // Allows to make the selectable arrow thicker. Will only work if domAttributes is present\n}\n```\n\n\u003e Please note that the `middle` anchor does not look very good: the curve won't look nice and the arrow marker will have a little offset.\n\u003e The issue won't be solved before a long time.\n\nThe `ArcherStyle` type has the following shape:\n\n```javascript\n{\n  strokeColor: string,\n  strokeWidth: number,\n  strokeDasharray: number,\n  noCurves: boolean,\n  lineStyle: string,\n  endShape: Object,\n  startMarker: boolean,\n  endMarker: boolean,\n}\n```\n\n## Troubleshooting\n\n### My arrows don't re-render correctly...\n\nTry using the `refreshScreen` instance method on your `ArcherContainer` element. You can access it through the [ref of the component](https://reactjs.org/docs/refs-and-the-dom.html).\n\nCall `refreshScreen` when the event that you need is triggered (`onScroll` etc.).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpierpo%2Freact-archer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpierpo%2Freact-archer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpierpo%2Freact-archer/lists"}