struct-ui-components/src/hooks/useArray/useArray.ts

A collection of reusable, customizable React components built with TypeScript, Tailwind CSS, and Storybook. Designed for modern UI development with flexibility and scalability.

import { useState } from "react";

export const useArray = <T>(defaultValue: T[]) => {
  const [array, setArray] = useState<T[]>(defaultValue);

  const push = (element: T): void => {
    setArray((prevArray) => [...prevArray, element]);
  };

  const filter = (
    callback: (element: T, index: number, array: T[]) => boolean,
  ): void => {
    setArray((prevArray) => prevArray.filter(callback));
  };

  const update = (index: number, newElement: T): void => {
    setArray((prevArray) => [
      ...prevArray.slice(0, index),
      newElement,
      ...prevArray.slice(index + 1),
    ]);
  };

  const remove = (index: number): void => {
    setArray((prevArray) => [
      ...prevArray.slice(0, index),
      ...prevArray.slice(index + 1),
    ]);
  };

  const clear = (): void => {
    setArray([]);
  };

  return { array, set: setArray, push, filter, update, remove, clear };
};