react-compound-timer

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:

• Timer
• Stopwatch
• More 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: [],
}