grommet
components

Clock

a clock with timezone awareness

2
2
:
1
0
:
2
3
Storybook
CodeSandbox

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
"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"

clock.analog.second.width

The thickness of the seconds hand.
"3px"

clock.analog.size.xsmall

The whole size of the Analog Clock
"48px"

clock.analog.size.small

The whole size of the Analog Clock
"72px"

clock.analog.size.medium

The whole size of the Analog Clock
"96px"

clock.analog.size.large

The whole size of the Analog Clock
"144px"

clock.analog.size.xlarge

The whole size of the Analog Clock
"216px"

clock.analog.size.xxlarge

The whole size of the Analog Clock
"288px"

clock.analog.size.huge

The whole size of the Analog Clock
"288px"

clock.digital.text.xsmall.size

Defines the font size of the Digital Clock
"10px"

clock.digital.text.xsmall.height

Defines the line height of the Digital Clock
1.5

clock.digital.text.small.size

Defines the font size of the Digital Clock
"14px"

clock.digital.text.small.height

Defines the line height of the Digital Clock
1.43

clock.digital.text.medium.size

Defines the font size of the Digital Clock
"18px"

clock.digital.text.medium.height

Defines the line height of the Digital Clock
1.375

clock.digital.text.large.size

Defines the font size of the Digital Clock
"22px"

clock.digital.text.large.height

Defines the line height of the Digital Clock
1.167

clock.digital.text.xlarge.size

Defines the font size of the Digital Clock
"26px"

clock.digital.text.xlarge.height

Defines the line height of the Digital Clock
1.1875

clock.digital.text.xxlarge.size

Defines the font size of the Digital Clock
"34px"

clock.digital.text.xxlarge.height

Defines the line height of the Digital Clock
1.125