useWhenever

Category

Watch

Export Size

255 B

Last Changed

5 days ago

Shorthand for watching value to be truthy

Demo

Usage

import { useWhenever } from '@reause/shared'

// this
useWhenever(ready, () => console.log(state))

// is equivalent to (the initial mount run is skipped — a plain `useEffect`
// would fire on mount, so add `{ immediate: true }` to fire then too):
useEffect(() => {
  if (ready)
    console.log(state)
}, [ready])

With { immediate: true } the callback also fires on mount when the value is already truthy:

import { useWhenever } from '@reause/shared'

// this
useWhenever(ready, () => console.log(state), { immediate: true })

// is equivalent to:
useEffect(() => {
  if (ready)
    console.log(state)
}, [ready])

Callback Function

The callback will be called with cb(value, oldValue) — upstream's third onInvalidate argument (upstream's effect invalidation registration) is not ported.

import { useWhenever } from '@reause/shared'

useWhenever(height, (current, lastHeight) => {
  if (current > lastHeight)
    console.log(`Increasing height by ${current - lastHeight}`)
})

Computed

Same as watch, you can pass a getter function to calculate on each change.

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

const [counter, setCounter] = useState(0)

// this
useWhenever(counter === 7, () => console.log('counter is 7 now!'))

Options

Fire the callback on mount if the value is already truthy.

import { useWhenever } from '@reause/shared'

useWhenever(ready, () => console.log(state), { immediate: true })

Only trigger once when the condition is met — the watch stops after the first truthy fire.

import { useWhenever } from '@reause/shared'

useWhenever(ready, () => console.log(state), { once: true })

Type Declarations

export type Truthy<T> = T extends false | null | undefined ? never : T

export interface UseWheneverOptions {
    immediate?: boolean;
    once?: boolean;
}

export function useWhenever<T>(value: T, cb: (value: Truthy<T>, oldValue: T | undefined) => void, options?: UseWheneverOptions): () => void

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

e7ce0 - fix(shared): resolve useWhenever audit findings (#776)