Timer

時間が経過したときに、事前に定義されたコールバックをトリガーするタイマーを表示します。使用例としては、クイズのタイミングを表示します。

オプション

id | string: タイマーの一意の string IDを指定します。IDが設定されている場合、タイマーコンポーネントはページの更新にわたって持続します。. Default: none.
active | boolean (required): タイマーの開始・停止を切り替えることができるフラグ. Default: none.
belowZero | boolean: タイマーの持続時間を使い切った後もカウントを続けるかどうかを制御します。. Default: false.
duration | number (required): 秒単位. Default: none.
invisible | boolean: タイマーを隠すかどうかを制御します。. Default: false.
legend | string: タイマー文字. Default: ''.
style | object: CSSインラインスタイル. Default: {}.
onTimeUp | function: タイマー切れコールバック. Default: onTimeUp() {}.

ライブエディター

<Timer 
    id='test-quiz'
    active={true} 
    duration={50} 
    onTimeUp={() => {
      alert( 'done' );
    }}
/>

<Timer 
    id='test-quiz'
    active={true} 
    duration={50} 
    onTimeUp={() => {
      alert( 'done' );
    }}
/>

結果

ReferenceError: Provider is not defined