{"id":26170,"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.","status":"active","version":"2.0.2","language":"javascript","source_language":"en","source_url":"https://github.com/Eliav2/react-xarrows","tags":["javascript","react","reactjs","line","lines","arrow","arrows","xarrows","draw","typescript"],"install":[{"cmd":"npm install react-xarrows","lang":"bash","label":"npm"},{"cmd":"yarn add react-xarrows","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-xarrows","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency for React >=16.8.0","package":"react","optional":false}],"imports":[{"note":"Default export. Common mistake: using named import (Xarrow is not a named export).","wrong":"import { Xarrow } from 'react-xarrows'","symbol":"Xarrow","correct":"import Xarrow from 'react-xarrows'"},{"note":"Named export. Required in v2 for useXarrow to work.","wrong":"import Xwrapper from 'react-xarrows'","symbol":"Xwrapper","correct":"import { Xwrapper } from 'react-xarrows'"},{"note":"Named export. Hook must be called inside Xwrapper.","wrong":"import useXarrow from 'react-xarrows'","symbol":"useXarrow","correct":"import { useXarrow } from 'react-xarrows'"}],"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."},"warnings":[{"fix":"Wrap all arrows and connected elements in <Xwrapper> and use useXarrow() in draggable components.","message":"In v2.0.0, Xwrapper and useXarrow are required for Xarrow to update when elements move (e.g., drag).","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Use props directly: lineColor, headShape, etc. Update strokeColor to lineColor and advance to advanced.","message":"In v1.1.0, arrowStyle removed; its properties flattened to Xarrow props. strokeColor renamed to lineColor. advance renamed to advanced.","severity":"breaking","affected_versions":">=1.1.0"},{"fix":"Refer to v1.4.0+ docs for new label usage (e.g., label as ReactNode or object with position).","message":"In v1.4.0, label property API changed. Previous label API is deprecated.","severity":"deprecated","affected_versions":">=1.0.0 <1.4.0"},{"fix":"Ensure Xarrow is placed inside Xwrapper (v2) or a common parent with elements (v1).","message":"Xarrow must be a direct child of an Xwrapper (v2) or parent container (v1). Otherwise, arrows may not render or update.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"In v2, use useXarrow hook and call updateXarrow() after position changes. In v1, use key prop to remount.","message":"Arrow coordinates are calculated on mount and resize. Dynamic element positions (e.g., drag) need updateXarrow() call (v2) or manual trigger (v1).","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Change to: import Xarrow from 'react-xarrows'","cause":"Using named import instead of default import: import { Xarrow } from 'react-xarrows'","error":"Xarrow is not a component or is undefined"},{"fix":"Import: import { useXarrow, Xwrapper } from 'react-xarrows'. Wrap component tree with <Xwrapper>.","cause":"useXarrow is a named export, not default. Also requires Xwrapper context.","error":"useXarrow() is not defined or not exported"},{"fix":"In v2: wrap with <Xwrapper> and call useXarrow() in draggable component's onDrag handler.","cause":"Missing Xwrapper and useXarrow (v2) or using outdated v1 pattern.","error":"Arrow not updating on drag"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}