useSorted

Category

Array

Export Size

252 B

Last Changed

5 days ago

Reactive sorted array

Demo

Usage

import { useSorted } from '@reause/core'

// general sort — the default comparator is numeric: (a, b) => a - b
const sorted = useSorted([10, 3, 5, 7, 2, 1, 8, 6, 9, 4])
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] — source untouched

// object sort
const objArr = [{
  name: 'John',
  age: 40,
}, {
  name: 'Jane',
  age: 20,
}, {
  name: 'Joe',
  age: 30,
}, {
  name: 'Jenny',
  age: 22,
}]
const objSorted = useSorted(objArr, (a, b) => a.age - b.age)

// options overload — compare function via the options object
const objSorted2 = useSorted(objArr, { compareFn: (a, b) => a.age - b.age })

// options overload — custom sort algorithm (receives a copy + the compareFn)
const reversedSorted = useSorted([3, 1, 2], {
  sortFn: (source, compareFn) => source.sort(compareFn).reverse(),
})

// ref source
const stateSorted = useSorted(itemsRef)

Source Forms

source is a read-only value source and takes a plain readonly T[]. Resolve a React ref, state tuple or getter at the call site — the hook never writes the source, so no reactive wrapper is accepted:

const [items, setItems] = useState([3, 1, 2])

const sorted = useSorted(items) // re-sorts whenever `items` changes
const sortedRef = useSorted(itemsRef.current) // resolve a React ref at the call site
const sortedPlain = useSorted([3, 1, 2]) // a plain literal works too

Type Declarations

export type UseSortedCompareFn<T = any> = (a: T, b: T) => number

export type UseSortedFn<T = any> = (arr: T[], compareFn: UseSortedCompareFn<T>) => T[]

export interface UseSortedOptions<T = any> {
    sortFn?: UseSortedFn<T>;
    compareFn?: UseSortedCompareFn<T>;
}

export function useSorted<T = any>(source: readonly T[], compareFn?: UseSortedCompareFn<T>): T[]

export function useSorted<T = any>(source: readonly T[], options?: UseSortedOptions<T>): T[]

export function useSorted<T = any>(source: readonly T[], compareFn?: UseSortedCompareFn<T>, options?: Omit<UseSortedOptions<T>, 'compareFn'>): T[]

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

a003f - fix(core): resolve useSorted audit findings (#640)

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