# react-archer

> Draw arrows between DOM elements in React

Latest version **5.1.0** (published 2026-06-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-archer
pnpm add react-archer
yarn add react-archer
bun add react-archer
```

## Health

**Score 60/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 5.1.0 |
| Published | 2026-06-05 |
| First published | 2018-02-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 374.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1343 |
| Maintainers | pierpo |

## Links

- npm: https://www.npmjs.com/package/react-archer
- Repository: https://github.com/pierpo/react-archer
- Issues: https://github.com/pierpo/react-archer/issues
- npm.io page: https://npm.io/package/react-archer

## Dependencies (3)

- [react-fast-compare](https://npm.io/package/react-fast-compare.md) ^3.2.2
- [react-compiler-runtime](https://npm.io/package/react-compiler-runtime.md) ^1.0.0
- [resize-observer-polyfill](https://npm.io/package/resize-observer-polyfill.md) ^1.5.1

## Recent versions

- 5.1.0 (latest) — 2026-06-05
- 5.0.0 — 2026-05-29
- 4.4.0 — 2024-05-07
- 4.3.0 — 2023-07-04
- 4.2.3 — 2023-03-08
- 4.2.2 — 2022-12-08
- 4.2.1 — 2022-12-05
- 4.2.0 — 2022-11-03
- 4.1.0 — 2022-08-15
- 4.0.1 — 2022-07-04
- 4.0.0 — 2022-06-26
- 3.3.0 — 2021-12-21
- 3.2.2 — 2021-06-14
- 3.2.1 — 2021-05-19
- 3.2.0 — 2021-05-13
- … 33 more at https://npm.io/package/react-archer/versions

## README

# react-archer

🏹 Draw arrows between DOM elements in React 🖋

📖 **[Documentation & live examples →](https://pierpo.github.io/react-archer/)**

## Installation

`npm install react-archer --save` or `yarn add react-archer`

## Example

[![Example](./example.png)](https://pierpo.github.io/react-archer/)

```jsx
import { ArcherContainer, ArcherElement } from 'react-archer';

const boxStyle = { padding: '10px', border: '1px solid black' };

const App = () => (
  <ArcherContainer strokeColor="#6366f1">
    <ArcherElement
      id="root"
      relations={[
        {
          targetId: 'element2',
          sourceAnchor: 'bottom',
          targetAnchor: 'top',
          style: { strokeDasharray: '5,5' },
          // ...other relation options
        },
      ]}
    >
      <div style={boxStyle}>Root</div>
    </ArcherElement>

    {/* ...layout omitted... */}

    <ArcherElement id="element2" relations={[{ targetId: 'element3', label: 'Arrow 2' }]}>
      <div style={boxStyle}>Element 2</div>
    </ArcherElement>

    <ArcherElement id="element3">
      <div style={boxStyle}>Element 3</div>
    </ArcherElement>

    <ArcherElement id="element4" relations={[{ targetId: 'root', label: 'Arrow 3' }]}>
      <div style={boxStyle}>Element 4</div>
    </ArcherElement>
  </ArcherContainer>
);

export default App;
```

## Documentation

Full documentation lives on the website:

- **[Getting started](https://pierpo.github.io/react-archer/)**
- **[Examples](https://pierpo.github.io/react-archer/examples)** — live, interactive
- **[API reference](https://pierpo.github.io/react-archer/api)**
- **[Troubleshooting](https://pierpo.github.io/react-archer/troubleshooting)**

## Contributing

The library lives in `src/`. The `example/` app is a Vite playground used for
local development and end-to-end tests:

```bash
yarn install
yarn start        # run the example app at http://localhost:8080
yarn test         # format, lint, typecheck and unit tests
yarn test:e2e     # Cypress end-to-end tests
```

### Commit & PR conventions

PR titles must follow [Conventional Commits](https://www.conventionalcommits.org/)
(e.g. `feat: ...`, `fix: ...`, `chore: ...`, `docs: ...`). PRs are squash-merged
using their title, so this title becomes the commit on `master` and feeds the
changelog. A CI check validates the PR title.

---
_Source: https://npm.io/package/react-archer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._