react-arrows

React SVG arrow between two HTML elements

Usage no npm install needed!

<script type="module">
  import reactArrows from 'https://cdn.skypack.dev/react-arrows';
</script>

README

react-arrows

React library for creating SVG arrow between two HTML elements. Positions of elements are observed, so when they change arrow will re-render. Library is react implementation of arrows-svg

"Arrow"

https://codesandbox.io/s/stoic-perlman-6php9

Installation

npm install react-arrows

Too see more check arrows-svg

CSS styles

Styles should be added to make arrow visible. Feel free to change them.

.arrow {
  pointer-events: none;
}

.arrow__path {
  stroke: #000;
  fill: transparent;
  stroke-dasharray: 4 2;
}

.arrow__head line {
  stroke: #000;
  stroke-width: 1px;
}

How to use it

import Arrow, { DIRECTION } from 'react-arrows'

<Arrow
  className='arrow'
  from={{
    direction: DIRECTION.TOP,
    node: () => document.getElementById('from'),
    translation: [-0.5, -1],
  }}
  to={{
    direction: DIRECTION.RIGHT,
    node: () => document.getElementById('to'),
    translation: [0.9, 1],
  }}
  onChange={...}
/>

Building

npm run build

Storybook

npm run storybook