react-compound-timer
Custom react hook for creating timers, stopwatches, countdowns, etc.
Demo: https://volkov97.github.io/react-compound-timer/
Installation
npm install react-compound-timer
Usage
See demo folder for usage example.
Examples:
Simple stopwatch:
import { createTimeModel, useTimeModel } from "react-compound-timer";
const stopwatch = createTimeModel();
export const Stopwatch = () => {
const { value } = useTimeModel(stopwatch);
return <div>{value.s} seconds {value.ms} milliseconds</div>;
};
You can provide your own options object. See default options here.
Simple timer:
import { createTimeModel, useTimeModel } from "react-compound-timer";
import { TimeModelValueView } from "../TimeModelValueView/TimeModelValueView";
const timer = createTimeModel({
initialTime: 10000,
direction: "backward",
});
export const Timer = () => {
const { value } = useTimeModel(timer);
return <div>{value.s} seconds {value.ms} milliseconds</div>;
};
Default options:
{
initialTime: 0,
direction: "forward",
timeToUpdate: 250,
startImmediately: true,
lastUnit: "d",
roundUnit: "ms",
checkpoints: [],
}