{"library":"react-archer","title":"React Archer","description":"React Archer is a JavaScript library for drawing dynamic, configurable SVG arrows between any DOM elements within a React application. It is currently at version 4.4.0 and maintains a consistent release cadence, with multiple feature and bugfix releases within recent months, indicating active development. Its primary utility lies in simplifying the visualization of relationships or flows between disparate UI components. Key features include customizable arrow styles (color, width, dash array, curves/angles), support for start/end markers, and the ability to update arrow positions automatically when elements move or resize. It achieves this by managing an SVG layer over your React components, dynamically calculating coordinates based on element anchors. The library supports server-side rendering and provides TypeScript types, making it robust for modern React development.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-archer"],"cli":null},"imports":["import { ArcherContainer } from 'react-archer';","import { ArcherElement } from 'react-archer';","import type { ArcherContainerRef } from 'react-archer';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { ArcherContainer, ArcherElement } from 'react-archer';\nimport React from 'react';\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 = () => {\n  return (\n    <div style={{ height: '500px', margin: '50px' }}>\n      <ArcherContainer strokeColor=\"red\">\n        <div style={rootStyle}>\n          <ArcherElement\n            id=\"root\"\n            relations={[\n              {\n                targetId: 'element2',\n                targetAnchor: 'top',\n                sourceAnchor: 'bottom',\n                style: { strokeDasharray: '5,5' }\n              }\n            ]}\n          >\n            <div style={boxStyle}>Root</div>\n          </ArcherElement>\n        </div>\n\n        <div style={rowStyle}>\n          <ArcherElement\n            id=\"element2\"\n            relations={[\n              {\n                targetId: 'element3',\n                targetAnchor: 'left',\n                sourceAnchor: 'right',\n                style: { strokeColor: 'blue', strokeWidth: 1 },\n                label: <div style={{ marginTop: '-20px' }}>Arrow 2</div>\n              }\n            ]}\n          >\n            <div style={boxStyle}>Element 2</div>\n          </ArcherElement>\n\n          <ArcherElement id=\"element3\">\n            <div style={boxStyle}>Element 3</div>\n          </ArcherElement>\n\n          <ArcherElement\n            id=\"element4\"\n            relations={[\n              {\n                targetId: 'root',\n                targetAnchor: 'right',\n                sourceAnchor: 'left',\n                label: 'Arrow 3'\n              }\n            ]}\n          >\n            <div style={boxStyle}>Element 4</div>\n          </ArcherElement>\n        </div>\n      </ArcherContainer>\n    </div>\n  );\n};\n\nexport default App;\n","lang":"typescript","description":"Demonstrates how to set up `ArcherContainer` and `ArcherElement` to draw multiple arrows between React components with custom styling, labels, and anchor points.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}