use-countdown-worker

This package provides a React hook (useCountdown) to create a countdown timer utilizing web workers for accurate timing, even when the main thread is busy.

Usage

Installation:

1# npm
2npm install use-countdown-worker
3
4# yarn
5yarn add use-countdown-worker
6
7# pnpm
8pnpm install use-countdown-worker

Importing:

1// ESM
2import { useCountdown } from "use-countdown-worker";
3
4// CommonJS
5const { useCountdown } = require("use-countdown-worker");

Example:

1import React from 'react';
2import { useCountdown } from 'use-countdown-worker';
3
4function CountdownComponent() {
5  const { eta, start, stop } = useCountdown({
6    onTick: (remainingTime) => {
7      console.log(`Time remaining: ${remainingTime}ms`);
8    },
9    onStopped: () => {
10      console.log("Countdown stopped!");
11    },
12  });
13
14  return (
15    <div>
16      <p>Time remaining: {eta}ms</p>
17      <button onClick={() => start(10000, { tickMs: 500 })}>Start 10 seconds Countdown with 500ms tick</button>
18      <button onClick={stop}>Stop</button>
19    </div>
20  );
21}
22
23export default CountdownComponent;

API References

• useCountdown(options?: TOptions)

  Returns an object with:

  • eta: Current estimated time remaining in milliseconds.
  • start: Function to start the countdown.
  • stop: Function to stop the countdown.

  Available options:

  • onTick: A callback that gets called on every tick with the remaining time in milliseconds.
  • onStopped: A callback that gets called once the countdown stops.
  • onDone: A callback that gets called once the countdown reaches 0 eta.

• start(etaMs: number, startOptions?: TStartOptions):

  Starts the countdown.

  • etaMs: Total countdown time in milliseconds.
  • startOptions: Optional configurations for the countdown.
    • tickMs: Interval in milliseconds for the countdown to update. Default is 1000ms (1 second).

• stop(): Stops the countdown immediately.

Dependencies

This package relies on the following dependencies:

Direct Dependencies

• worker-timers: ^7.0.76

Peer Dependencies

• react: >=16.18.0

When using this package, ensure you meet the peer dependency requirements. If you're starting a new project, it's recommended to install both this package and its peer dependencies to avoid potential compatibility issues.

License

Made with 💛

Published under MIT License.

---