List - scriptkavi/hooks

Docs

List

Manage and manipulate lists

About

The useList hook manages and manipulates lists in a React component. It encapsulates list state and provides convenient methods to modify the list, allowing easy initialization with a default value and offering various methods to add, remove, update, or clear elements within the list.

Parameters

Name	Type	Description
defaultList	array	The initial list of elements. Default is an empty array.

Return Values

Name	Parameters	Description
`[0]`		The current list of elements.
`[1].set`	l: array	Replaces the entire list with a new array `l`.
`[1].push`	element: any	Appends the `element` to the end of the list.
`[1].removeAt`	index: number	Removes the element at the specified `index` from the list.
`[1].insertAt`	index: number, element: any	Inserts the `element` at the specified `index` in the list.
`[1].updateAt`	index: number, element: any	Replaces the element at the specified `index` with the `element`.
`[1].clear`		Removes all elements from the list.

Installation

Run the following command:

npx scriptkavi-hooks@latest add list

Usage

import { useList } from "@/hooks/list"

import ListDemo from "./ListDemo"
 
export default function App() {
  const [list, { set, push, removeAt, insertAt, updateAt, clear }] = useList([
    "First",
    "Second",
    "Third",
  ])
 
  return (
    <section>
      <header>
        <h1>UseList</h1>
        <button
          disabled={list.length < 1}
          className="link"
          onClick={() => insertAt(1, "woo")}
        >
          Insert After First
        </button>
        <button
          disabled={list.length < 2}
          className="link"
          onClick={() => removeAt(1)}
        >
          Remove Second Item
        </button>
        <button className="link" onClick={() => set([1, 2, 3])}>
          Reset
        </button>
        <button className="link" onClick={() => clear()}>
          Clear
        </button>
      </header>
      <ListDemo
        list={list}
        updateAt={updateAt}
        push={push}
        removeAt={removeAt}
      />
    </section>
  )
}

Latest LocalStorage