useWatchAtMost

Category

Watch

Export Size

330 B

Last Changed

5 days ago

Like useWatch, but the callback fires at most count times

Demo

Usage

Similar to useWatch with an extra option count which sets the number of times the callback is triggered. After the count is reached, further changes are ignored.

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

const [num, setNum] = useState(0)

const { count, stop, pause, resume } = useWatchAtMost(
  num,
  () => { console.log('trigger!') }, // triggered at most 3 times
  {
    count: 3, // the number of times triggered
  },
)

Type Declarations

export interface UseWatchAtMostOptions {
    count: number;
    immediate?: boolean;
}

export interface UseWatchAtMostReturn {
    count: number;
    stop: () => void;
    pause: () => void;
    resume: () => void;
}

export interface UseWatchCallback<T = any> {
    (value: T, oldValue: T | undefined): void;
}

export function useWatchAtMost<T extends any[]>(source: readonly [
    ...T
], callback: UseWatchCallback<[
    ...T
]>, options: UseWatchAtMostOptions): UseWatchAtMostReturn

export function useWatchAtMost<T>(source: T, callback: UseWatchCallback<T>, options: UseWatchAtMostOptions): UseWatchAtMostReturn

export function useWatch<T extends any[]>(source: readonly [
    ...T
], callback: UseWatchCallback<[
    ...T
]>, options?: UseWatchOptions): void

export function useWatch<T>(source: T, callback: UseWatchCallback<T>, options?: UseWatchOptions): void

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

a81e2 - fix(shared): resolve useWatchAtMost audit findings (#763)