react-countupを利用し簡単なカウントを実装してみた #React

初心者用。とても簡単でした。
数字がカウントアップします。

react-countup

react-countup をnpm install

npm install react-countup

簡単なコードを記載
importにreact-countupを記載する

import "./styles.css";
import React from 'react'
import Countup from 'react-countup'

export default function App() {
  return (
    <div className="App">
      <h1>
        <Countup end={20} duration={5}/>
      </h1>
    </div>
  );
}

durationをいれるとアニメーションでカウントアップされます。

結果↓

値を渡した結果

これだと実用性が全くないので、値を渡したりしてみる

App.js


import "./styles.css";
import { CountUpTest } from "./CountUpTest";

export default function App() {
  return (
    <div className="App">
      <h1>
        <CountUpTest num={20}></CountUpTest>
      </h1>![countup2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1901173/ced48db9-2b7f-2bdd-e5b9-636c3438671f.gif)

    </div>
  );
}

CountUpTest.jsx

import Countup from "react-countup";

export const CountUpTest = (props) => {
  const { num } = props;
  return (
    <div>
      <h1>
        <Countup end={num} duration={5} prefix="¥" decimals="2" />
      </h1>
    </div>
  );
};

結果

参考URLのuseCountUpを利用すると動かなかった。バグなのかな。

参考URL
https://www.youtube.com/watch?v=zttrshYjHHQ&ab_channel=Codevolution