Skip to content

useArrayFind

Category
Export Size
84 B
Last Changed
5 days ago

Reactive Array.find.

Demo

Usage

tsx
import { 
useArrayFind
} from '@reause/shared'
const
list
= [1, -1, 2]
const
positive
=
useArrayFind
(
list
,
val
=>
val
> 0) // 1

Use with reactive array

tsx
import { 
useArrayFind
} from '@reause/shared'
import {
useState
} from 'react'
const [
list
,
setList
] =
useState
([-1, -2])
const
positive
=
useArrayFind
(
list
,
val
=>
val
> 0) // undefined
setList
([...
list
, 1])
// positive: 1 on the next render

list is a plain read-only array: pass the array directly (e.g. from useState), or ref.current if you keep it in a ref. The result recomputes on the render that passes a new array.

Type Declarations

ts
export type UseArrayFindReturn<T = any> = T | undefined

export function useArrayFind<T>(list: readonly T[], fn: (element: T, index: number, array: readonly T[]) => boolean): UseArrayFindReturn<T>

Source

Source · Demo · VueUse

Contributors

hairyf

Changelog

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

Released under the MIT License. v0.1.8