Timer

Displays a timer that will trigger a predefined callback when the time is up. An example use case is the timing of quizzes.

Example:

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

Open interactive preview

Options:

  • id | string (required): the unique string ID for the timer. The timer component is persistent over page refreshes. Default: none.
  • active | boolean (required): flag that can be toggled to start or pause the timer. Default: none.
  • duration | number (required): duration in seconds for the timer. Default: none.
  • invisible | boolean: undefined. Default: false.
  • style | object: CSS inline styles. Default: {}.
  • onTimeUp | function: callback invoked when the timer runs out. Default: onTimeUp() {}.

results matching ""

    No results matching ""