dotUI
dotUI
beta
  1. Hooks
  2. Browser hooks
  3. useList

useList

Manage and manipulate lists with useList.

"use client";

import React from "react";
import { EditIcon, Trash2Icon } from "lucide-react";
import { Button } from "@/lib/components/core/default/button";
import { Input } from "@/lib/components/core/default/input";
import { useList } from "@/lib/hooks/use-list";

function Demo() {
  const [inputValue, setInputValue] = React.useState("");
  const [list, { set, push, removeAt, insertAt, clear }] = useList<string | number>([
    "First",
    "Second",
    "Third",
  ]);

  return (
    <div>
      <div className="flex gap-2">
        <Button isDisabled={list.length < 1} onPress={() => insertAt(1, "woo")}>
          Insert After First
        </Button>
        <Button isDisabled={list.length < 2} onPress={() => removeAt(1)}>
          Remove Second Item
        </Button>
        <Button onPress={() => set([1, 2, 3])}>Reset</Button>
        <Button onPress={() => clear()}>Clear</Button>
      </div>
      <div className="mt-4 space-y-2">
        <div className="flex items-center space-x-2">
          <Input
            value={inputValue}
            onChange={(e) => {
              setInputValue(e.target.value);
            }}
          />
          <Button onPress={() => push(inputValue)}>Add</Button>
        </div>
        {list.map((item, index) => (
          <div
            key={index}
            className="bg-background group relative flex h-10 items-center rounded-md border px-2"
          >
            <div className="mr-2">{item}</div>
            <div className="absolute right-3 top-[50%] flex translate-y-[-50%] items-center space-x-2 opacity-0 duration-100 group-hover:opacity-100">
              <Button variant="quiet" size="sm" shape="square">
                <EditIcon size={15} />
              </Button>
              <Button
                variant="quiet"
                size="sm"
                shape="square"
                onPress={() => {
                  removeAt(index);
                }}
              >
                <Trash2Icon size={15} />
              </Button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Installation

Copy and paste the following code into your project.

import React from "react";

type CustomList<T> = {
  set: (l: T[]) => void;
  push: (element: T) => void;
  removeAt: (index: number) => void;
  insertAt: (index: number, element: T) => void;
  updateAt: (index: number, element: T) => void;
  clear: () => void;
};

export function useList<T>(defaultList: T[] = []): [T[], CustomList<T>] {
  const [list, setList] = React.useState<T[]>(defaultList);

  const set = React.useCallback((l: T[]) => {
    setList(l);
  }, []);

  const push = React.useCallback((element: T) => {
    setList((l) => [...l, element]);
  }, []);

  const removeAt = React.useCallback((index: number) => {
    setList((l) => [...l.slice(0, index), ...l.slice(index + 1)]);
  }, []);

  const insertAt = React.useCallback((index: number, element: T) => {
    setList((l) => [...l.slice(0, index), element, ...l.slice(index)]);
  }, []);

  const updateAt = React.useCallback((index: number, element: T) => {
    setList((l) => l.map((e, i) => (i === index ? element : e)));
  }, []);

  const clear = React.useCallback(() => setList([]), []);

  return [list, { set, push, removeAt, insertAt, updateAt, clear }];
}

Update the import paths to match your project setup.

Parameters

NameTypeDescription
defaultList
array
The initial list of elements. Default is an empty array.

Return values

The useList hook returns an array with two elements:

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

Usage

const [currentArray, { set, push, removeAt, insertAt, updateAt, clear }] = useList([1, 2, 3, 4, 5]);
dotUI
beta

Accessible, mobile friendly, modern UI components.

TwitterGitHub

Community

Built by mehdibha. The source code is available on GitHub.