2.0.5 • Published 8 months ago
react-compound-timer v2.0.5
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";
// 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 <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({
// start from 10 seconds
initialTime: 10000,
// count down
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: [],
}
2.0.3
8 months ago
2.0.2
9 months ago
2.0.5
8 months ago
2.0.4
8 months ago
1.1.16
9 months ago
2.0.1
9 months ago
2.0.0
9 months ago
1.2.0
4 years ago
1.1.15
5 years ago
1.1.14
5 years ago
1.1.13
5 years ago
1.1.12
5 years ago
1.1.11
5 years ago
1.1.10
5 years ago
1.1.9
5 years ago
1.1.8
5 years ago
1.1.7
5 years ago
1.1.6
5 years ago
1.1.5
5 years ago
1.1.4
5 years ago
1.1.3
5 years ago
1.1.2
5 years ago
1.1.1
5 years ago
1.1.0
5 years ago
1.0.13
5 years ago
1.0.12
5 years ago
1.0.11
5 years ago
1.0.10
5 years ago
1.0.9
5 years ago
1.0.8
5 years ago
1.0.7
6 years ago
1.0.6
6 years ago
1.0.5
6 years ago
1.0.4
6 years ago
1.0.3
6 years ago
1.0.2
6 years ago
1.0.1
6 years ago
1.0.0
6 years ago