react-xarrows

2.0.2 verified Fri May 01 auth: no javascript

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.

Common errors

error Xarrow is not a component or is undefined ↓

cause Using named import instead of default import: import { Xarrow } from 'react-xarrows'

fix

Change to: import Xarrow from 'react-xarrows'

error useXarrow() is not defined or not exported ↓

cause useXarrow is a named export, not default. Also requires Xwrapper context.

fix

Import: import { useXarrow, Xwrapper } from 'react-xarrows'. Wrap component tree with <Xwrapper>.

error Arrow not updating on drag ↓

cause Missing Xwrapper and useXarrow (v2) or using outdated v1 pattern.

fix

In v2: wrap with <Xwrapper> and call useXarrow() in draggable component's onDrag handler.

Warnings

breaking In v2.0.0, Xwrapper and useXarrow are required for Xarrow to update when elements move (e.g., drag). ↓

fix Wrap all arrows and connected elements in <Xwrapper> and use useXarrow() in draggable components.

breaking In v1.1.0, arrowStyle removed; its properties flattened to Xarrow props. strokeColor renamed to lineColor. advance renamed to advanced. ↓

fix Use props directly: lineColor, headShape, etc. Update strokeColor to lineColor and advance to advanced.

deprecated In v1.4.0, label property API changed. Previous label API is deprecated. ↓

fix Refer to v1.4.0+ docs for new label usage (e.g., label as ReactNode or object with position).

gotcha Xarrow must be a direct child of an Xwrapper (v2) or parent container (v1). Otherwise, arrows may not render or update. ↓

fix Ensure Xarrow is placed inside Xwrapper (v2) or a common parent with elements (v1).

gotcha Arrow coordinates are calculated on mount and resize. Dynamic element positions (e.g., drag) need updateXarrow() call (v2) or manual trigger (v1). ↓

fix In v2, use useXarrow hook and call updateXarrow() after position changes. In v1, use key prop to remount.

Install

npm install react-xarrows

yarn add react-xarrows

pnpm add react-xarrows

Imports

Xarrow
wrong
```
import { Xarrow } from 'react-xarrows'
```
correct
```
import Xarrow from 'react-xarrows'
```
Default export. Common mistake: using named import (Xarrow is not a named export).

Xwrapper

wrong

import Xwrapper from 'react-xarrows'

correct

import { Xwrapper } from 'react-xarrows'

Named export. Required in v2 for useXarrow to work.

useXarrow

wrong

import useXarrow from 'react-xarrows'

correct

import { useXarrow } from 'react-xarrows'

Named export. Hook must be called inside Xwrapper.

Quickstart

Draws an arrow from a ref to an element ID. Shows basic Xarrow usage with start/end anchors.

import React, { useRef } from 'react';
import Xarrow from 'react-xarrows';

const boxStyle = { border: 'grey solid 2px', borderRadius: '10px', padding: '5px' };

function SimpleExample() {
  const box1Ref = useRef(null);
  return (
    <div style={{ display: 'flex', justifyContent: 'space-evenly', width: '100%' }}>
      <div ref={box1Ref} style={boxStyle}>hey</div>
      <p id="elem2" style={boxStyle}>hey2</p>
      <Xarrow start={box1Ref} end="elem2" />
    </div>
  );
}

export default SimpleExample;