Movatterモバイル変換

Read theofficial documentation.

👁️Live Demo

A React timer hook that calls the provided callback at regular intervals. Can be used as a stopwatch, too.

It's accurate, precise, and includes a rich set of options, functionality, and accessors.

• ⏰ Timeout and timestamp based
  • Based onsetTimeout() and Unix times, not ticks.
• 🎯 Accurate and precise
  • Perfect mean accuracy with no wandering, with sub 10ms callback precision.
• 💪 Doesn't choke under pressure
  • Resilient to expensive callbacks and low timer delays.
• 🧰 Versatile
  • Can be used as a timer, one-time delay, or stopwatch. Additional options available.
• ⏯️ Pause and resume
  • Supports pausing, and tracks cumulative elapsed pause time between resumes.
• 🌞 Accessors for everything
  • Includes getters for everything under the sun! Know all the things.

Version 3 of this package features a complete redesign to reduce unnecessary renders, plus the addition of a new convenience hook.

• Internally, timer state is now tracked via React refs and timer options are memoized for you. These changes significantly improved performance.
• The useTimer hook's signature has been changed. The callback is now provided as the second argument, and should be cached usingReact.useCallback() to optimize render performance. Refer to theQuick Start section below.
• TheuseMomentaryBool hook was added.

If this project helped save you time, please consider buying me a coffee, which powers my development (and life). Your support is much appreciated!

• Documentation
• Overview
  • Features include:
  • 🆕 New In Version 3
• Donate
• Table of Contents
• Installation
• Quick Start
  • Repeating Timer
  • One-Time Delay
  • Stopwatch
  • Momentary Boolean
  • Other Usage
• TypeScript
• Icon Attribution
• Contributing
• ⭐ Found It Helpful? Star It!
• License

npm i react-use-precision-timer

import{useTimer}from"react-use-precision-timer";

In your function component:

constcallback=React.useCallback(()=>console.log('Boom'),[]);// The callback will be called every 1000 milliseconds.consttimer=useTimer({delay:1000},callback);

In a handler or effect:

timer.start();

The following functions can be used to control theTimer:

• timer.start() - Start the timer. If already started, will restart the timer. You can optionally pass a start time in Unix epoch milliseconds.
• timer.stop() - Stop the timer.
• timer.pause() - Pause the timer.
• timer.resume() - Resume the timer.

Refer toTimer for all available functions, including getters for elapsed times.

If you'd like to run a callback after a one-time delay, use the helper hookuseDelay:

import{useDelay}from'react-use-precision-timer';

In your function component:

constcallback=React.useCallback(()=>console.log('Boom'),[]);// Will call once after 1000ms.constonceTimer=useDelay(1000,callback);

In a handler or effect:

onceTimer.start();

This will call the callback after the provided 1000 millisecond delay only once.

The timer also functions as a stopwatch when no delay is provided. You can use the helper hookuseStopwatch:

import{useStopwatch}from"react-use-precision-timer";

conststopwatch=useStopwatch();

Usestart(),stop(),pause(), andresume() to control the stopwatch.

Stopwatch is aTimer object. Refer to Timer's getters to retrieve elapsed running time, paused time, and so forth.

Calling start while a stopwatch is already running will restart it.

For convenience, theuseMomentaryBool hook has been included to momentarily toggle a boolean. This wraps theuseDelay hook.

This is very useful for momentary notifications, such as a copy button that shows a momentary checkmark to indicate the operation succeeded.

import{useMomentaryBool}from'react-use-precision-timer';

In your function component:

// Toggle to true, then back to false after 1000ms.const[value,toggle]=useMomentaryBool(false,1000);

Callingtoggle() will set the boolean totrue, then back tofalse after a 1000 millisecond delay.

SeeuseTimer for all other hook options and timer functions.

Type definitions have been included forTypeScript support.

Favicon byTwemoji.

Open source software is awesome and so are you. 😎

Feel free to submit a pull request for bugs or additions, and make sure to update tests as appropriate. If you find a mistake in the docs, send a PR! Even the smallest changes help.

For major changes, open an issue first to discuss what you'd like to change.

If you found this project helpful, let the community know by giving it astar:👉⭐

Want to support the project? Feel free to grab me a coffee, which is my main source of fuel for development:

SeeLICENSE.md.