Use-countdown-worker NPM

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.