ストップウォッチを作る

react-timer-hookを用いる。

コマンドプロンプトで、プロジェクトのディレクトリに移動し、

npm install --save react-timer-hook と記載し、Enterを押す。

MyStopwatch.js

import {useStopwatch} from 'react-timer-hook';

const MyStopwatch = ()=>{

    const {

        seconds,

        minutes,

        hours,

        days,

        isRunning,

        start,

        pause,

        reset,

    } = useStopwatch({autoStart:false});

    const changeStart = ()=>{

        if(isRunning === false){

            reset();

            start();

        }else{}

    }

    const changeReset = ()=>{

        if(isRunning === false){

            reset();

            pause();

        }else{}

    }

    return(

        <div>

            <h1>ストップウォッチ</h1>

            <div>

                <p>{hours}:{minutes}:{seconds}</p>

            </div>

            <p>{isRunning ? '計測中...' : '一時停止中'}</p>

            <button type="button" onClick={changeStart}>スタート</button>

            <button type="button" onClick={pause}>一時停止</button>

            <button type="button" onClick={changeReset}>リセット</button>

            <p>※リセットボタンは２回続けて押してください</p>

        </div>

    )

}

export default MyStopwatch;