【React】入力欄フォーカス時にテンキーを表示できるライブラリ「react-numpad」

プロジェクトにはまだ未実装なのですが、自分用にまとめ。
入力欄にフォーカスが当たったときにテンキーが表示されるコンポーネントを実装できるライブラリ「react-numpad」です。

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

gpietro/react-numpad: A numpad for number, date and time, built with and for React.
https://github.com/gpietro/react-numpad

デモページはこちら。

React App
https://gpietro.github.io/react-numpad-demo/

ライブラリのインストールは下記のコマンドで行います。

npm install --save react-numpad

サンプルコードは下記のとおりです。

import NumPad from 'react-numpad';

<NumPad.Number
    onChange={(value) => { console.log('value', value)}}
    label={'テンキーあり入力欄'}
    placeholder={'placeholder'}
    value={100}
    decimal={false}
    negative={false}
/>

少数点の許可/禁止、負の値の許可/禁止なども設定できるみたいです。
ちなみに、上記は自然数のみ入力可能にしています。
また、テンキーの表示位置も調整できるようです。

まだ実際にプロジェクトに実装してはいないのですが、コードも複雑ではないですし、かなり導入は簡単そうですね。
実装していて何か気になるポイントが見つかったら、その際に記事にまとめたいと思います。

以上、React でテンキー付きの入力欄を実装できるライブラリ「react-numpad」のご紹介でした。