[React] アニメーション付き数値カウンターで視覚演出する「react-number-easing」の使い方

リアルタイム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

基本的な使い方

以下で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は選択できる。雰囲気にあったものを適用するとよいだろう。

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