react-compound-timer

   

Custom react hook for creating timers, stopwatches, countdowns, etc.

Demo: https://volkov97.github.io/react-compound-timer/

Installation

``bash
npm install react-compound-timer
`

Usage

See demo folder for usage example.

Examples:

- Timer
- Stopwatch
- More examples

Simple stopwatch:

`jsx
import { createTimeModel, useTimeModel } from "react-compound-timer";

// Create model, provide your own options object if needed
const stopwatch = createTimeModel();

export const Stopwatch = () => {
// Use this model in any components with useTimeModel hook
const { value } = useTimeModel(stopwatch);

return

;
};
`

You can provide your own options object. See default options here.

Simple timer:

`jsx
import { createTimeModel, useTimeModel } from "react-compound-timer";
import { TimeModelValueView } from "../TimeModelValueView/TimeModelValueView";

const timer = createTimeModel({
// start from 10 seconds
initialTime: 10000,
// count down
direction: "backward",
});

export const Timer = () => {
const { value } = useTimeModel(timer);

return

;
};
`

Default options:

`js
{
initialTime: 0,
direction: "forward",
timeToUpdate: 250,
startImmediately: true,
lastUnit: "d",
roundUnit: "ms",
checkpoints: [],
}
``