Clock

a clock with timezone awareness

Props

a11yTitle

Custom label to be used by screen readers. When provided, an aria-label will be added to the element.

"a user friendly label for screen readers"

alignSelf

How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid.

"start"

"center"

"end"

"stretch"

gridArea

The name of the area to place this inside a parent Grid.

"a parent grid area name"

hourLimit

Whether to roll over the hours after 12 or after 24.

"12"

"24"

margin

The amount of margin around the component. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.

"xsmall"

"small"

"medium"

"large"

"xlarge"

{
  "vertical": "...",
  "horizontal": "...",
  "top": "...",
  "bottom": "...",
  "left": "...",
  "right": "..."
}

onChange

If the clock is running, this function will be called with the current time value each time it changes.

('T10:37:46') => {}

precision

How precise a time to represent.

"hours""minutes""seconds"

run

Whether the clock should actively adjust time or be fixed to the time specified. 'backward' could be used as a countdown timer.

truefalse"backward""forward"

size

Size for both Analog and Digital Clocks. For Analog, there's also 'huge', that's equal to 'xxlarge' and exists for backwards compatibility

"xsmall""small""medium""large""xlarge""xxlarge""string"

time

ISO8601 time or duration. For example: 'PT8H12M23S', 'T08:12:23', or '2015-02-22T08:12:23'. Any included date portion will be ignored. If not provided, the current browser time will be used.

"2018-10-23T10:37:45"

"T10:37:45"

"PT10H37M45S"

type

What type of visualization to show.

"analog""digital"

Theme

clock.analog.extend

Any additional style for the Analog Clock.

"any CSS"

(props) => {}

clock.analog.hour.color

The color of the hour hand.

{"dark": "light-2", "light": "dark-3"}

clock.analog.hour.shape

The shape of the hour hand

"round"

clock.analog.hour.size

The length of the hour hand.

"24px"

clock.analog.hour.width

The thickness of the hour hand

"8px"

clock.analog.minute.color

The color of the minute hand.

{"dark": "light-4", "light": "dark-3"}

clock.analog.minute.shape

The shape of the minute hand.

"round"

clock.analog.minute.size

The length of the minute hand.

"12px"

clock.analog.minute.width

The thickness of the minute hand.

"4px"

clock.analog.second.color

The color of the seconds hand

{
  "dark": "accent-1",
  "light": "accent-1"
}

clock.analog.second.shape

The shape of the seconds hand.

"round"

clock.analog.second.size

The length of the seconds hand.

"9px"