Hooks
/ API Reference
Hooks
/ API Reference

useList

A hook that provides a list of items and actions to manipulate it.

The Gist

'use client'
import { useList } from '@weser/hooks'

function Component() {
  const [list, actions] = useList()

  return (
    <div>
      <button onClick={() => actions.add(Math.random())}>Add Item</button>
      <button onClick={() => actions.clear()}>Clear List</button>
      {list.map((item, index) => (
        <div key={item}>
          {item}
          <button onClick={() => actions.removeAt(index)}>Remove</button>
        </div>
      ))}
    </div>
  )
}

Parameters

ParameterTypeDefaultDescription
defaultListArray<T>?[]The default list of items.

Returns

([Array<T>, Object]) A tuple where the first element is the list of items and the second element is an object with the following properties:

ActionTypeDescription
set(list: Array<T>) => voidSet the list of items.
add(item: T) => voidAdd an item to the list.
removeAt(index: number) => voidRemove an item from the list.
updateAt(index: number, item: T) => voidUpdate an item in the list.
insertAt(index: number, item: T) => voidInsert an item at a specific index.
clear() => voidClear the list.
On this page