Clock Faces

The Face provides unique functionality to each clock. Consider a stop watch, a lunar clock, or counter – these all have different functions around time. The Face in FlipClock.js is no different. Each face has different options and methods, but each share a minimal unified API.

Interface

faceValue() and interval() are the only methods that are required on a face. Everything else is unique to each face.

interface Face<T extends Face<T> = any> extends FaceHooks<T> {
    /**
     * The face's value to display. When this value changes, or a new
     * `FaceValue` instance has been returned, the clock will automatically
     * re-render.
     *
     * @public
     */
    faceValue(): FaceValue<any>;
    /**
     * This method is called with every timer interval. Use this to increment,
     * decrement or value change the `faceValue()`.
     *
     * @public
     */
    interval(instance: FlipClock<T>): void;
}

Available Faces

FlipClock.js provides 4 unique faces.

1. Clock
2. Elapsed Time
3. Counter
4. Alphanumeric