Search…
Timer
Displays a countdown or stopwatch.

Usage

import { Timer } from '@aragon/ui'
const NOW = Date.now()
const DAY = 1000 * 60 * 60 * 24
const endDate = new Date(NOW + 5 * DAY)
const startDate = new Date(NOW - 5 * DAY)
const App = () => (
<div>
<Timer end={endDate} />
<Timer start={startDate} />
</div>
)

Demonstration

Props

end

TYPE
DEFAULT VALUE
Date
None
The end of the countdown, as a Date instance.

start

TYPE
DEFAULT VALUE
Date
None
The start of a timer, as a Date instance.

format

TYPE
DEFAULT VALUE
Enum
'dhms'
  • Options: [ 'yMdhms', 'yMdhm', 'yMdh','yMd', 'yM', 'Mdhms', 'Mdhm', 'Mdh', 'Md', 'dhms', 'dhm', 'hms', 'hm', 'ms', 'm', 's' ]
Format output in years 'y', months 'M', days 'd', hours 'h', minutes 'm', seconds 's'

maxUnits

TYPE
DEFAULT VALUE
Number
-1
Is the number of units to be displayed regardless of the format. By default, it’s set to -1 which will display all the available units. If it’s set to a number n, which can be from 1 to all the units used in the format prop, it will display only the first n units, left to right.

showEmpty

TYPE
DEFAULT VALUE
Boolean
False
Display the units on the left side of the timer when they are equal to zero.

showIcon

TYPE
DEFAULT VALUE
Boolean
True
Display the clock icon on the left side of the timer.
Copy link
On this page
Usage
Demonstration
Props