useInterval

Category

Animation

Export Size

432 B

Last Changed

5 days ago

Reactive counter that increases on every interval.

Demo

Usage

import { useInterval } from '@reause/shared'

// count will increase every 200ms
const counter = useInterval(200)

With Controls

import { useInterval } from '@reause/shared'

const { counter, reset, pause, resume, isActive } = useInterval(200, {
  controls: true,
})

// Reset counter to 0
reset()

// Pause/resume the interval
pause()
resume()

Options

Option	Type	Default	Description
controls	boolean	false	Expose pause, resume, reset, and isActive controls
immediate	boolean	true	Start the interval immediately
callback	(count: number) => void	—	Called on every interval with the current count

Reactive Interval

The interval can be reactive:

import { useInterval } from '@reause/shared'
import { useState } from 'react'

const [intervalMs, setIntervalMs] = useState(1000)
const counter = useInterval(intervalMs)

// Change the interval dynamically (restarts the running timer)
setIntervalMs(500)

Callback on Every Interval

import { useInterval } from '@reause/shared'

useInterval(1000, {
  callback: (count) => {
    console.log(`Tick ${count}`)
  },
})

Type Declarations

export interface UseIntervalOptions<Controls extends boolean = false> {
    controls?: Controls;
    immediate?: boolean;
    callback?: (count: number) => void;
    immediateCallback?: boolean;
}

export interface UseIntervalControls {
    counter: number;
    reset: () => void;
    isActive: boolean;
    pause: () => void;
    resume: () => void;
}

export type UseIntervalReturn = number | UseIntervalControls

export function useInterval(interval?: number, options?: UseIntervalOptions<false>): number

export function useInterval(interval: number, options: UseIntervalOptions<true>): UseIntervalControls

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

948bd - fix(shared): resolve useInterval audit findings (#733)

8fddc - chore!: remove all Vue-only Maybe* types and getter unions, adopt React Ref (#462)