Registry / web-framework / react-xarrows

react-xarrows

library2.0.2jsnpmunverified

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.

web-framework

npm install react-xarrows

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-XARROWS

react-xarrows

web-frameworkjavascriptv2.0.2

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Xarrow

✓ import Xarrow from 'react-xarrows'

✗ import { Xarrow } from 'react-xarrows'

Default export. Common mistake: using named import (Xarrow is not a named export).

Xwrapper

✓ import { Xwrapper } from 'react-xarrows'

✗ import Xwrapper from 'react-xarrows'

Named export. Required in v2 for useXarrow to work.

useXarrow

✓ import { useXarrow } from 'react-xarrows'

✗ import useXarrow from 'react-xarrows'

Named export. Hook must be called inside Xwrapper.

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;

Debug

Known issues

breakingIn 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.

affects: >=2.0.0

breakingIn 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.

affects: >=1.1.0

deprecatedIn 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).

affects: >=1.0.0 <1.4.0

gotchaXarrow 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).

affects: >=1.0.0

gotchaArrow 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.

affects: >=1.0.0

Errors

Common errors & fixes

Xarrow is not a component or is undefined

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

fix

Change to: import Xarrow from 'react-xarrows'

useXarrow() is not defined or not exported

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

fix

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

Arrow not updating on drag

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.

Upgrade

Version history

2.0.2latest on npm

Audit

Dependencies

reactrequiredpeer dependency for React >=16.8.0

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/Eliav2/react-xarrows ↗

packagehttps://www.npmjs.com/package/react-xarrows ↗

homepagehttps://eliav2.github.io/react-xarrows/ ↗