react-clock-face

react-clock-face

React based configurable SVG clock face

This package implements a react based SVG component that displays a configurable clock face that displays the configured time.

In contrast to other clocks available, this component purposefully doesn't include functionality to make it tick or to detect the current time. It's purpose is to display the hour provided by the application.

Despite not having a ticking mechanism, it implements animation which means an update on the time props will make it change smoothly. It's up to the application to keep track of the time in this case.

The available props are

  className (string)  // default ''      — one or more classes to be added to the clock root element
  hours (number)      // default 0       — the hours component of the time to be displayed
  minute (number)     // default 0       — the minutes component of the time to be displayed
  marks (boolean)     // default false   — a boolean indicating whether or not to dislay hour marks
  numbers (boolean)   // default false   — a boolean indicating whether or not to dislay hour numbers (although marks and numbers can be used simultaneously, it doesn't look good)
  size  (string)      // default "100vh" — a string representing the css size of the clock.

Motivation and examples

The motivation for this clock was for it to be used as a visual aid in educational applications for children learning time arithmetics. Other uses may include a graphical representation of a static time, or the front end for an application that tracks the time.