miracle2k/react-arrow

React component that renders a SVG arrow. Can point in any direction, different styles.

react-arrow

React component that renders an SVG arrow. You can use this to point at things.

See a demo: https://miracle2k.github.io/react-arrow/

Installation

$ npm install @elsdoerfer/react-arrow

Sample

import Arrow from '@elsdoerfer/react-arrow';

const renderArrow = props => (
  <Arrow
    angle={45}
    length={100}
    style={{
      width: '100px'
    }}
  />
)

Properties

angle - where to point. angle={0} points to the top, going clock-wise. angle={90} points to the right.

length - the length of the arrow. Note that since this is SVG, the length really means the size of the line vs the size of the arrow head. You'll just use a CSS style, as in the sample, the determine how large the arrow should be on your page.

color - color of the line and arrow head.

arrowHeadFilled - set this to false to have a simple arrow head that is must a short stroke on both sides.

lineWidth - Use this to make the arrow fatter.

lineDashed - Makes the line dashed. Pass either true, or any value that the SVG property strokeDasharray would accept.

react-arrow's Issues

documentation

Good job there!

However I could not figure out how the orign and target of the arrows were determined. Is that with respect to the bounding box of the enclosing div?

idyll_index.js:59004 Warning: Failed prop type: Invalid prop `lineDashed` of value `0.9` supplied to `Arrow`, expected one of [null,null].

This is my code:

<Arrow
        angle={this.props.polarisation}
        length={this.props.x}
        lineWidth={3}
        lineDashed={0.9}
        style={{
          transform: `translate(${this.state.arrowX}px, ${this.state.arrowY}px)`,
          width: `${this.state.arrowLength}px`,
          height: `${this.state.arrowLength}px`
        }}
/>

Actually, for every value, I use for the lineDashed property I get the error in the title? I'm using version 1.0.3.

Having issues when importing this lib

Undefined is not an object (Evaluating React_default.Prptypes.number)

Invariant violation

After fixing proptypes...I am getting Invariant violation issue

View config not found for name polyline