Meta-Clock

A clock component for React.

Install

$ npm install --save meta-clock

Use

import Clock from 'meta-clock';

const MyComponent = () => (
  <div>
    ...
    <Clock ... />
    ...
  </div>
);

See demo/components/styled-clock.jsx for example.

Props

Primitive props

• hour: number; required; Hour of the clock
• minute: number; required; Minute of the clock
• highlightHour: number; optional; Highlighted hour of the clock
• highlightMinute: number; optional; Highlighted minute of the clock
• is24Hours: boolean; optional; Set to true to render a 24-hours clock
• size: number; required; The size of the clock in pixel

Function props

The following event handler functions all receive the same parameter payload:

type EventHandlerPayload = {
  layer: number,
  division: number,
}

• onClick: (payload: EventHandlerPayload) => void
• onMouseOver: (payload: EventHandlerPayload) => void
• onMouseEnter: (payload: EventHandlerPayload) => void
• onMouseLeave: (payload: EventHandlerPayload) => void

... where layer: 0 is for hours and layer: 1 is for minutes; and division is indexed value of the slice of the clock face (i.e. {layer: 0, division: 6} is hour 6; and {layer: 1, division: 14} is minute 15).

The following render functions allows one to override certain aspect of the rendering of the clock face:

• renderExtras
• markerRadius
• renderMarker
• armLength
• renderArm

Run demo locally

$ nvm use
$ npm install
$ npm run dev

... then open http://localhost:8000.