【React】SVGの矢印を描画できるライブラリ「react-arrow」

昨日は、React で円や矩形などを描画できるライブラリ「react-shapes」について紹介しましたので、今日は矢印を描画できるライブラリのご紹介です。
タイトルにある通り、「react-arrow」というライブラリです。

GitHub のページはこちらから。

GitHub – miracle2k/react-arrow: React component that renders a SVG arrow. Can point in any direction, different styles.
https://github.com/miracle2k/react-arrow

導入方法ですが、まず下記コマンドでライブラリをインストールします。

$ npm install @elsdoerfer/react-arrow --save

コマンドが実行出来たら、任意の場所にコードを追加します。
サンプルコードは下記のとおりです。

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

<Arrow
  angle={0}
  color='#F0F',
  lineWidth={3}
  length={100}
  style={{
    width: '30px',
    height: '100px'
  }}
/>

上記を実行すると、幅 30px、長さ 100px、太さ 3 の上向きの紫色の矢印が描画できます。
また、私は使いませんでしたが arrowHeadFilled と lineDashed というプロパティもあります。
arrowHeadFilled を false にすると、矢印の先端の三角形の部分が塗りつぶされなくなります。
lineDashed は、true にすると、矢印の線が破線になります。
基本的な使い方は以上です！

実装できる矢印はシンプルなものなので、汎用性が高そうですね。
また、実装も簡単でしたので、React で矢印の描画をするならとてもおすすめです！

以上、React で SVG の矢印を描画できるライブラリ「react-arrow」のご紹介でした。
ご参考になれば幸いです。