react-number-easingの使用方法
GitHub - javierbyte/react-number-easing: React component to interpolate rendering of numbers in the frontend.
React component to interpolate rendering of numbers in the frontend. - javierbyte/react-number-easing
まず、npmを使用してパッケージをインストールする。
npm install react-number-easing --save使用には以下のように記述する。
import NumberEasing from 'react-number-easing';
<NumberEasing value={15} speed={300} decimals={0} ease="quintInOut" />プロパティは以下のとおりである。
| Name | Default | Hint |
|---|---|---|
| value | null | 目標値を設定 |
| speed | 500ms | アニメーションの速度を設定 |
| ease | quintInOut | アニメーション方式を設定 |
| decimals | 0 | 表示する小数点以下の桁数を設定 |
| customFunctionRender | Number(value).toString(decimals) | レンダリング関数のカスタム設定 |
