vydimitrov / use-elapsed-time

React hook to measure elapsed time using requestAnimationFrame

useElapsedTime React hook

React hook to measure elapsed time using requestAnimationFrame. The time measurement can be played and paused, additionally the start time and duration can be set. The primary use case of the hooks is in animations where the most important part of the animation is time.

• Toggle play/pause
• Set start time and duration
• Adjust update interval to your need

Installation

yarn add use-elapsed-time

Basic usage

import { useElapsedTime } from 'use-elapsed-time'

const MyComponent = () => {
  const { elapsedTime } = useElapsedTime({ isPlaying: true })

  return elapsedTime
}

Function signature

  const {
    elapsedTime: number,
    reset: (newStartAt: number) => void
  } = useElapsedTime({
    isPlaying: boolean,
    duration?: number,
    startAt?: number,
    updateInterval?: number,
    onComplete?: (totalElapsedTime: number) => void | { shouldRepeat?: boolean, delay?: number, newStartAt?: number },
    onUpdate?: (elapsedTime: number) => void
  })

Props

Prop Name	Type	Default	Description
isPlaying	boolean	-	Indicates if the loop to get the elapsed time is running or it is paused
duration	number	-	Animation duration in seconds
startAt	number	0	Shift the start time to a different value than 0
updateInterval	number	0	Update interval in seconds. Determines how often the elapsed time value will change. When set to 0 the value will update on each key frame
onComplete	(totalElapsedTime: number) => void | { shouldRepeat: boolean, delay: number }	-	onComplete callback will be fired when the duration is reached. The callback will receive as an argument the totalElapsedTime in seconds. onComplete can be used to restart the elapsed time loop by returning an object with the following params: shouldRepeat - indicates if the loop should start over; delay - delay before looping again in seconds; newStartAt - change the startAt value before looping again
onUpdate	(elapsedTime: number) => void	-	On time update event handler. It receives the current elapsedTime time in seconds

Return value

The hook returns an object with elapsedTime in seconds and reset method - { elapsedTime, reset }

Browser support

The hook supports all modern browsers targeting es6. Internet Explorer (IE) is not longer supported.

Use cases

Countdown timer

Count up animation

Non-liner path animation

use-elapsed-time's Issues

Not working in WebXR mode

I'm using it on my react app, it works fine in every device, except when i get to the WebXR mode, any clue why is that?

Timer only repeats and continues if you're on the page

Is this the intended design of the timer? Ideally, even if the user navigates to a different tab, I would want the timer to repeat in the background.

How to set interval

How do I set interval on the elapsed time so that it only updates every second? Right now it is causing too many re-renders and I want to update only on each second.

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

Dependency Dashboard

This issue provides visibility into Renovate updates and their statuses. Learn more

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency @types/jest to v27

---

• Check this box to trigger a request for Renovate to run again on this repository