@hey-mirror/clock v1.0.0-alpha.6

@hey-mirror/clock

Example

import styled from '@emotion/styled';
import { Clock } from '@hey-mirror/today';

const Wrapper = styled.div({
  display: 'flex',
  flexDirection: 'column',
  gap: 8,
});

export const Display = () => (
  <Clock
    hour12
    locale='en-US'
  >
    <Clock.Hours />:<Clock.Minutes/>.<Clock.Seconds>{' '}
    <Clock.Period>
      <Clock.Period.AM>
        am
      </Clock.Period.AM>
      <Clock.Period.PM>
        pm
      </Clock.Period.PM>
    </Clock.Period>
  </Clock>
);

API

<Clock />

<Hours />

<Hours /> will handle hour12 if set on <Clock />.

<Minutes />

<Seconds />

<Period />

Only renders if hour12 is set on <Clock />.

or you can customize both displays:

<Time.Period>
  <Time.Period.AM>a.m.</Time.Period.AM>
  <Time.Period.PM>p.m.</Time.Period.PM>
</Time.Period>

Include both <Time.Period.AM /> and <Time.Period.PM /> — only the correct one will be rendered.

<Period.AM /> and <Period.PM />