Timer

Formats time in the format minutes:seconds.

Example

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

Open interactive preview

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.
  • 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() {}.
Last updated on by Planeshifter