useArrayIncludes

Category

Array

Export Size

309 B

Last Changed

5 days ago

Reactive Array.includes

Demo

Usage

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

const [list, setList] = useState([0, 2, 4])
const includes = useArrayIncludes(list, 2) // true

setList([0, 1, 4]) // includes === false on the next render

const objects = [{ id: 1 }, { id: 2 }]
useArrayIncludes(objects, 2, 'id') // true — compare by key
useArrayIncludes(objects, { id: 2 }, (element, value) => element.id === value.id) // true — comparator function
useArrayIncludes(objects, { id: 1 }, { fromIndex: 1, comparator: (element, value) => element.id === value.id }) // false

Use with reactive array

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

const [list, setList] = useState([0, 2, 4, 6, 8])
const result = useArrayIncludes(list, 10) // false

setList([...list, 10])
// result: true on the next render

setList(list.slice(0, -1))
// result: false on the next render

The list and value arguments are plain read-only values: pass the array/value directly (e.g. from useState), or ref.current if you keep them in a ref. The result recomputes on the render that passes a new value.

Type Declarations

export type UseArrayIncludesComparatorFn<T, V> = (element: T, value: V, index: number, array: readonly T[]) => boolean

export interface UseArrayIncludesOptions<T, V> {
    fromIndex?: number;
    comparator?: UseArrayIncludesComparatorFn<T, V> | keyof T;
}

export type UseArrayIncludesReturn = boolean

export function useArrayIncludes<T, V = any>(list: readonly T[], value: V, comparator?: UseArrayIncludesComparatorFn<T, V>): UseArrayIncludesReturn

export function useArrayIncludes<T, V = any>(list: readonly T[], value: V, comparator?: keyof T): UseArrayIncludesReturn

export function useArrayIncludes<T, V = any>(list: readonly T[], value: V, options?: UseArrayIncludesOptions<T, V>): UseArrayIncludesReturn

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

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