{"id":11648,"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.","status":"active","version":"4.4.0","language":"javascript","source_language":"en","source_url":"https://github.com/pierpo/react-archer","tags":["javascript","typescript"],"install":[{"cmd":"npm install react-archer","lang":"bash","label":"npm"},{"cmd":"yarn add react-archer","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-archer","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core React functionality is required for components and hooks.","package":"react","optional":false},{"reason":"Provides TypeScript types for React components, essential for a fully typed development experience.","package":"@types/react","optional":true},{"reason":"Used for runtime prop type validation, though less common in TypeScript-first projects.","package":"prop-types","optional":true}],"imports":[{"note":"Prefer named imports. CommonJS `require` syntax is not recommended, especially if your project is ESM-first.","wrong":"const ArcherContainer = require('react-archer').ArcherContainer;","symbol":"ArcherContainer","correct":"import { ArcherContainer } from 'react-archer';"},{"note":"ArcherElement is a named export from the main package entry point, not a default export or submodule import.","wrong":"import ArcherElement from 'react-archer/ArcherElement';","symbol":"ArcherElement","correct":"import { ArcherElement } from 'react-archer';"},{"note":"This is a TypeScript type for the ref object. Use `import type` to avoid bundling it at runtime. Available since v4.2.3.","wrong":"import { ArcherContainerRef } from 'react-archer';","symbol":"ArcherContainerRef","correct":"import type { ArcherContainerRef } from 'react-archer';"}],"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."},"warnings":[{"fix":"Users relying on Flow types must either remain on `react-archer@3.x` or migrate their project to TypeScript.","message":"Version 4.0.0 completely dropped Flow type support and migrated the codebase to TypeScript. The internal implementation was also refactored to use React Hooks instead of class components.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Ensure target user environments use modern Safari versions. For applications with `#` in URLs, this update resolves previous issues.","message":"Version 4.1.0 introduced changes to arrow ID encoding and how arrow markers are displayed, specifically by not using the full URL. This change may break arrow rendering on some older Safari browser versions, while fixing issues with URLs containing hash characters (`#`).","severity":"breaking","affected_versions":">=4.1.0"},{"fix":"Update to `react-archer@4.2.2` or later to leverage bug fixes specifically addressing SSR compatibility and rendering issues.","message":"Earlier versions of `react-archer` (pre-4.2.1) had known issues with Server-Side Rendering (SSR), leading to arrows not being displayed or runtime warnings.","severity":"gotcha","affected_versions":"4.0.0 - 4.2.0"},{"fix":"Update to `react-archer@4.2.0` or later. For situations requiring manual control, access the `refreshScreen` method via the `ArcherContainer` ref, e.g., `archerRef.current?.refreshScreen()`.","message":"Prior to version 4.2.0, there were reported bugs regarding element registration and refreshing, leading to arrows not updating their positions correctly or not drawing at all.","severity":"gotcha","affected_versions":"<4.2.0"},{"fix":"Update to `react-archer@4.2.3` or later and use the exported `ArcherContainerRef` type, e.g., `const archerRef = useRef<ArcherContainerRef>(null);`.","message":"TypeScript users attempting to use `ref` with `ArcherContainer` components prior to v4.2.3 might have experienced improper type inference or errors.","severity":"gotcha","affected_versions":"<4.2.3"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure your ref is correctly typed using `ArcherContainerRef` and checked for `null` before use: `const archerRef = useRef<ArcherContainerRef>(null); archerRef.current?.refreshScreen();`","cause":"Attempting to call the `refreshScreen` method on an `ArcherContainer` ref without proper TypeScript typing or before the ref is assigned.","error":"Property 'refreshScreen' does not exist on type 'ArcherContainer | null'."},{"fix":"Ensure you are using `react-archer@4.2.2` or newer which includes SSR fixes. If issues persist, consider dynamically importing `react-archer` components only on the client-side or using a conditional rendering approach for SSR.","cause":"`react-archer` attempting to access DOM-specific objects (like `document`) during a server-side rendering (SSR) environment before the browser's `window` or `document` objects are available.","error":"ReferenceError: document is not defined"},{"fix":"Verify that all `id` props on `ArcherElement`s are unique and valid strings. Ensure all `ArcherElement`s are descendants of an `ArcherContainer`. Update to `react-archer@4.2.0` or later for fixes related to element registration and refreshing. Check browser console for related errors.","cause":"This can be caused by incorrect element IDs, elements not being registered correctly, or issues with initial rendering logic within `ArcherContainer`.","error":"Arrows are not appearing or are stuck at position (0,0)."}],"ecosystem":"npm"}