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:

# npm
npm install use-countdown-worker

# yarn
yarn add use-countdown-worker

# pnpm
pnpm install use-countdown-worker

Importing:

// ESM
import { useCountdown } from "use-countdown-worker";

// CommonJS
const { useCountdown } = require("use-countdown-worker");

Example:

import React from 'react';
import { useCountdown } from 'use-countdown-worker';

function CountdownComponent() {
  const { eta, start, stop } = useCountdown({
    onTick: (remainingTime) => {
      console.log(`Time remaining: ${remainingTime}ms`);
    },
    onStopped: () => {
      console.log("Countdown stopped!");
    },
  });

  return (
    <div>
      <p>Time remaining: {eta}ms</p>
      <button onClick={() => start(10000, { tickMs: 500 })}>Start 10 seconds Countdown with 500ms tick</button>
      <button onClick={stop}>Stop</button>
    </div>
  );
}

export 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.