Package Exports

use-elapsed-time

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (use-elapsed-time) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

useElapsedTime React hook

Codecov

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
Easily repeat the measurement
Combine with any easing function to get the right animation
Built-in and ready-to-use TypeScript type definitions.

Installation

yarn add use-elapsed-time

Basic usage

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

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

  return elapsedTime
}

Basic usage demo

Function signature

  function useElapsedTime(
    isPlaying: boolean,
    options?: {
      duration?: number,
      startAt?: number,
      autoResetKey?: string | number,
      onComplete?: (totalElapsedTime: number) => void | { shouldRepeat: boolean, delay: number, newStartAt: number }
    }
  ): {
    elapsedTime: number,
    reset?: (newStartAt: number) => void
  }

1st arg. `isPlaying: boolean`

Default: isPlaying = false

Indicates if the loop to get the elapsed time is running or it is paused.

2nd arg. `options: object`

Default: options = {}

Prop Name	Type	Default	Description
duration	number	-	Animation duration in seconds
startAt	number	0	Shift the start time to a different value than 0
autoResetKey	string \| number	-	Auto reset animation when the key changes. It works similar to React's `key` prop
onComplete	(totalElapsedTime: number) => void \| { shouldRepeat: boolean, delay: number, newStartAt: 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` set new start at value.

Return value `{ elapsedTime, reset }`

The hook returns an object with elapsedTime in seconds and reset method.

Use cases

Countdown timer

Count up animation

Non-liner path animation

use-elapsed-time