grommet
components

Clock

a clock with timezone awareness

Storybook
CodeSandbox
Github

Props

a11yTitle

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

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

string
"start"
"center"
"end"
"stretch"

gridArea

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

string
"a parent grid area name"

hourLimit

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

number
12
24
string
"12"
"24"

margin

The amount of margin around the component.

string
"none"
"xxsmall"
"xsmall"
"small"
"medium"
"large"
"xlarge"
object

Can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.


{
    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.

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

precision

How precise a time to represent.

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

boolean
true
false
string
"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

string

T-shirt sizing based off the theme or a specific size in px, em, etc.

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

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

type

What type of visualization to show.

string
"analog"
"digital"

React/DOM Properties

At its core, the Clock component is a regular <div> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for div elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.

At its core, the Clock component is a regular <svg> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for svg elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.

Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.

Theme

clock.analog.extend

Any additional style for the Analog Clock.

string

Any CSS.

css`color: 'blue'`
function
(props) => {}

clock.analog.hour.color

The color of the hour hand.

string | { dark: string, light: string }
{ dark: light-2, light: dark-3 }

clock.analog.hour.shape

The shape of the hour hand

string
"round"

clock.analog.hour.size

The length of the hour hand.

string
"24px"

clock.analog.hour.width

The thickness of the hour hand

string
"8px"

clock.analog.minute.color

The color of the minute hand.

string | { dark: string, light: string }
{ dark: light-4, light: dark-3 }

clock.analog.minute.shape

The shape of the minute hand.

string
"round"

clock.analog.minute.size

The length of the minute hand.

string
"12px"

clock.analog.minute.width

The thickness of the minute hand.

string
"4px"

clock.analog.second.color

The color of the seconds hand

string | { dark: string, light: string }
{ dark: accent-1, light: accent-1}

clock.analog.second.shape

The shape of the seconds hand.

string
"round"

clock.analog.second.size

The length of the seconds hand.

string
"10px"

clock.analog.second.width

The thickness of the seconds hand.

string
"3px"

clock.analog.size.xsmall

The whole size of the Analog Clock

string
"48px"

clock.analog.size.small

The whole size of the Analog Clock

string
"72px"

clock.analog.size.medium

The whole size of the Analog Clock

string
"96px"

clock.analog.size.large

The whole size of the Analog Clock

string
"144px"

clock.analog.size.xlarge

The whole size of the Analog Clock

string
"216px"

clock.analog.size.xxlarge

The whole size of the Analog Clock

string
"288px"

clock.analog.size.huge

The whole size of the Analog Clock

string
"288px"

clock.digital.text.xsmall.size

Defines the font size of the Digital Clock

string
"10px"

clock.digital.text.xsmall.height

Defines the line height of the Digital Clock

number
1.5

clock.digital.text.small.size

Defines the font size of the Digital Clock

string
"14px"

clock.digital.text.small.height

Defines the line height of the Digital Clock

number
1.43

clock.digital.text.medium.size

Defines the font size of the Digital Clock

string
"18px"

clock.digital.text.medium.height

Defines the line height of the Digital Clock

number
1.375

clock.digital.text.large.size

Defines the font size of the Digital Clock

string
"22px"

clock.digital.text.large.height

Defines the line height of the Digital Clock

number
1.167

clock.digital.text.xlarge.size

Defines the font size of the Digital Clock

string
"26px"

clock.digital.text.xlarge.height

Defines the line height of the Digital Clock

number
1.1875

clock.digital.text.xxlarge.size

Defines the font size of the Digital Clock

string
"34px"

clock.digital.text.xxlarge.height

Defines the line height of the Digital Clock

number
1.125