Counter

Counter increments are decrements a number in any given format. A counter can stop at a target or count indefinitely.

Options

type CounterProps = {
    /**
     * Determines if a clock should count down instead of up.
     */
    countdown?: boolean;
    /**
     * A format function for how the counter is displayed.
     */
    format?: (value: number) => string;
    /**
     * A number formatter for how the counter is displayed.
     */
    formatter?: Intl.NumberFormat;
    /**
     * The starting value of the counter.
     */
    value?: FaceValue<number> | number;
    /**
     * The number of steps the counter ticks each interval.
     */
    step?: number;
    /**
     * The clock will automatically stop when the target value is reached.
     */
    targetValue?: FaceValue<number> | number;
};

Basic Example

The counter starts at 0 and counts indefinitely.

import { counter, css, flipClock, theme } from 'flipclock';

const parent = document.querySelector('#clock')!;

flipClock({
    parent,
    face: counter(),
    theme: theme({
        css: css({
            fontSize: '3rem'
        })
    })
});

Countdown

The counter starts at 10 and counts down to 0 where it stops.

import { counter, css, flipClock, theme } from 'flipclock';

const parent = document.querySelector('#clock')!;

flipClock({
    parent,
    face: counter({
        value: 10,
        targetValue: 0,
        countdown: true,
        formatter: Intl.NumberFormat('en-US', {
            minimumIntegerDigits: 2
        })
    }),
    theme: theme({
        css: css({
            fontSize: '3rem'
        })
    })
});

Increment and Decrement

The counter manually increments or decrements on button click. The counter will even show negative numbers.

import { counter, css, flipClock, theme } from 'flipclock';

const parent = document.querySelector('#clock')!;

const instance = flipClock({
    parent,
    autoStart: false,
    face: counter({
        formatter: Intl.NumberFormat('en-US', {
            minimumIntegerDigits: 2
        })
    }),
    theme: theme({
        css: css({
            fontSize: '3rem'
        })
    })
});

<button @click="instance.face.increment()">+1</button>
<button @click="instance.face.increment(10)">+10</button>
<button @click="instance.face.decrement()">-1</button>
<button @click="instance.face.decrement(10)">-10</button>