@hey-mirror/clock

@hey-mirror/clock

Example

import { Clock } from '@hey-mirror/clock';

export const Display = () => {
  return (
    <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

Prop	Default	Type
children	-	ReactNode
hour12	true	boolean
locale	en-US	string

Hours

Prop	Default	Type
className	-	string
format	numeric	2-digit or numeric

Minutes

Prop	Default	Type
className	-	string
format	2-digit	2-digit or numeric

Seconds

Prop	Default	Type
className	-	string
format	2-digit	2-digit or numeric

Period

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

Prop	Default	Type
children	<><Period.AM /><Period.PM /></>	ReactNode
className	-	string

You can use the default:

<Clock.Period />

or you can customize the displays:

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

If customizing, you must provide versions of both AM and PM.

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

Period.AM / Period.PM

Prop	Default	Type
children	AM or PM	ReactNode
className	-	string