リアルタイムWebコンテンツにおいてプログレスUIを配置するケースは少なくない。これは進行状況を知らせるために用いられ、たとえばアップロード進捗やAPIリクエスト進捗など思い出される。

さてこのプログレスUI（進捗値）をページに描画するにあたり、瞬時に切り替わるような単純な差し替えでは面白くない。せっかくだから、なめらかに推移するようなエフェクトをかけてリアルタイム感を演出したい。

そんなニーズに最適なReact componentがある。

このエントリーでは、数値変化にアニメーションを与える「react-number-easing」を紹介したい。

導入方法

react-number-easing は、以下コマンドから導入できる。

インストール

$ npm install react-number-easing --save
# or
$ yarn add react-number-easing

設置

import NumberEasing from 'react-number-easing';

<NumberEasing
  value={15}
  speed={300}
  decimals={0}
  ease="quintInOut" />

props

Name	Default	Hint
value	null	目標値を設定
speed	500ms	アニメーションの速度を設定
ease	quintInOut	アニメーション方式を設定
decimals	0	表示する小数点以下の桁数を設定
customFunctionRender	Number(value).toString(decimals)	レンダリング関数のカスタム設定

基本的な使い方

以下でreact-number-easingを使用したReact componentの例を示そう。6秒毎に数値がアニメーションする、というものだ。

import { useState, useEffect } from 'react';
import NumberEasing from 'react-number-easing';
​
var intervalId;
​
function App() {
  const [value, setValue] = useState(0);
​
  function onUpdate() {
    const val = Math.floor(Math.random() * 10001);
    setValue(val);
  }
​
  useEffect(() => {
    intervalId = setInterval(() => onUpdate(), 6000);
    return () => clearInterval(intervalId);
  }, []);
​
  return (
    <div className="App">
      <NumberEasing value={value} />
    </div>
  );
}
​
export default App;

まとめ

数値変化にアニメーションを与えるReactコンポーネント「react-number-easing」の紹介だった。

当該コンポーネントの使用は、いたって簡単でステートの更新で機能する。さらにpropsは少なく非常にシンプルな作りのため迷子になるようなことはなかった。アニメーション方式は内部でeasesライブラリを読み込んでいて、ひと通りのeasingは選択できる。雰囲気にあったものを適用するとよいだろう。

このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。