{"library":"react-xarrows","title":"react-xarrows","description":"React library to draw arrows or lines between DOM elements using refs or IDs. Current stable version is 2.0.2, released in 2022, requiring React >= 16.8.0. Ships TypeScript definitions. Key differentiator: simple declarative API with smart SVG arrow rendering, auto-updating on element moves, and customizable styles (color, dash, head shape). Stable with occasional patch releases. Alternative to react-archer or custom SVG solutions.","language":"javascript","status":"active","last_verified":"Fri May 01","install":{"commands":["npm install react-xarrows"],"cli":null},"imports":["import Xarrow from 'react-xarrows'","import { Xwrapper } from 'react-xarrows'","import { useXarrow } from 'react-xarrows'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useRef } from 'react';\nimport Xarrow from 'react-xarrows';\n\nconst boxStyle = { border: 'grey solid 2px', borderRadius: '10px', padding: '5px' };\n\nfunction SimpleExample() {\n  const box1Ref = useRef(null);\n  return (\n    <div style={{ display: 'flex', justifyContent: 'space-evenly', width: '100%' }}>\n      <div ref={box1Ref} style={boxStyle}>hey</div>\n      <p id=\"elem2\" style={boxStyle}>hey2</p>\n      <Xarrow start={box1Ref} end=\"elem2\" />\n    </div>\n  );\n}\n\nexport default SimpleExample;","lang":"typescript","description":"Draws an arrow from a ref to an element ID. Shows basic Xarrow usage with start/end anchors.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}