React Xarrows

React Xarrows is a React library for drawing arrows and lines that connect two components on the page. You point it at a start and an end element by passing either a React ref or the string id of a DOM node, and it renders an SVG arrow between them that updates automatically as the components move, resize, or re-render.

Beyond the simple two-prop case, the library exposes a large surface of styling and behavior props such as anchors, colors, dashness, curveness, custom head and tail shapes, and labels, along with an Xwrapper context and useXarrow hook that trigger selective updates so arrows stay in sync during drag or animation without re-rendering the whole tree.

What You Get

• An Xarrow component that draws an arrow between a start and end element identified by ref or id
• A rich set of props for anchors, colors, stroke width, dash patterns, curveness, labels, and custom head/tail shapes
• An Xwrapper provider and useXarrow hook for selective re-rendering during drag and animation
• Full TypeScript type definitions for every prop and anchor option

Common Use Cases

• Visualizing relationships or flow between cards, nodes, or list items in a UI
• Building simple diagram and flowchart editors with draggable connected boxes
• Annotating tutorials or onboarding screens with arrows pointing at specific elements

Under The Hood

Architecture - The public surface is exported from src/index.tsx: the default Xarrow component plus Xwrapper and useXarrow. src/Xarrow/Xarrow.tsx resolves the start and end targets (ref or id), measures their bounding boxes, and computes an SVG path with configurable anchors (src/Xarrow/anchors.ts) and prop parsing (useXarrowProps.ts), then renders an absolutely positioned SVG canvas containing separate body, head, and tail paths. Xwrapper.tsx provides a React context and useXarrow.tsx exposes a hook so connected elements can imperatively trigger arrow updates during drag or animation without re-rendering the whole tree.

Tech Stack - Written primarily in TypeScript (about 91% of the source) with React declared as a peer dependency. Runtime dependencies are lodash for prop handling and prop-types for runtime prop validation. The package is built with webpack and the TypeScript compiler via the build:prod/build:ts scripts, emitting to lib/.

Code Quality - The code is typed throughout with a dedicated types.ts and privateTypes.ts, and props are validated at runtime via propTypes.ts. Test coverage is minimal: the __test__ directory contains a single example1.test.js, so behavior is largely verified through the extensive README examples rather than an automated suite. The repository is explicitly in maintenance-only mode per the author’s README note.

API Design - The API is deliberately minimal for the common case: a single <Xarrow start end /> renders a working arrow, while dozens of optional props layer on customization only when needed. Prop names are consistent and self-describing, many accept multiple shapes (string, object, or array) for flexibility, and the README is example-driven from the simplest to the most advanced use, giving the library a low barrier to entry.