【React】手書きキャンバスを実装できるライブラリ「react-signature-canvas」

React でペイントアプリなどのように、キャンバスに自由にお絵描きできる機能を実装したいときにおすすめのライブラリです。
JavaScript なら canvas を使うのが一般的かと思うのですが、苦手なのでもっと簡単なものを…と探したら、「react-signature-canvas」というライブラリがヒットしました。

GitHub のページはこちらです。

GitHub – agilgur5/react-signature-canvas: A React wrapper component around signature_pad (in < 150 LoC). Unopinionated and heavily updated fork of react-signature-pad
https://github.com/agilgur5/react-signature-canvas

実装方法ですが、まずライブラリのインストールを下記コマンドで行います。

npm install --save react-signature-canvas

上記が完了したら、あとはプロジェクトにインポートするだけです。
サンプルコードは下記のとおりです。

import React from 'react'
import SignatureCanvas from 'react-signature-canvas'

class Example extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <SignatureCanvas
          penColor='green'
          canvasProps={{ width: 500, height: 500 }}
        />
      </div>
    )
  }
}
export default Example;

こちらを実行すると、500 × 500 のサイズで、お絵描きできるキャンバスが作成されます。
線の色も penColor で変更できますので、こちらは state で管理するといいかもしれませんね。
penColor はデフォルト色は黒色です。
なお、このままだと白背景に白キャンバスで全く見えないので、枠線等を CSS で付けることをおすすめします。

以上、React で手書きキャンバスを実装できるライブラリ「react-signature-canvas」のご紹介でした。
ご参考になれば幸いです。