Skip to main content


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


  • 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
ReferenceError: Provider is not defined