Timer

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

Options

id | string: the unique string ID for the timer. If an ID is set, 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.
belowZero | boolean: controls whether timer continues counting after the duration is exhausted. Default: false.
duration | number (required): duration in seconds for the timer. Default: none.
invisible | boolean: controls whether the timer should be hidden. Default: false.
legend | string: text displayed in front of the timer. Default: ''.
style | object: CSS inline styles. Default: {}.
onTimeUp | function: callback invoked when the timer runs out. Default: onTimeUp() {}.

Live Editor

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

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

Result

ReferenceError: Provider is not defined