useArray

useArray simplifies array operations using React setState API. Includes methods such as “push”, “filter”, “update”, “remove” and “clear”.

Installation

npx rabbithook@latest add use-array

Usage

App.tsx

import useArray from "@/hooks/use-array";

function Component() {
  const { arr, set, push, filter, update, remove, clear } = useArray([]);

  return (
    <>
      <button onClick={() => push("Hello")}>Add</button>
      <button onClick={() => update(0, "Bye")}>Update</button>
      <button onClick={() => remove(0)}>Remove</button>
      <button onClick={() => filter((item) => item === "Bye")}>Filter</button>
      <button onClick={() => clear()}>Clear</button>
      <div>
        {arr.map((item, index) => (
          <div key={index}>{item}</div>
        ))}
      </div>
    </>
  )
}

Code

Typescript

use-array.ts

import { useState } from "react";

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

  const push = (element: T) => setArray((prevValue: T[]) => [...prevValue, element]);

  const filter = (callback: (value: T, index: number, array: T[]) => boolean) => setArray(a => a.filter(callback));

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

  const remove = (index: number) => {
    setArray(prevValue => [
      ...prevValue.slice(0, index),
      ...prevValue.slice(index + 1, prevValue.length - 1)
    ])
  }

  const clear = () => setArray([]);

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

export default useArray;

Javascript

use-array.js

import { useState } from "react";

function useArray(defaultValue) {
	const [array, setArray] = useState(defaultValue);

	const push = (element) => setArray((prevValue) => [...prevValue, element]);

	const filter = (callback) => setArray(a => a.filter(callback));

	const update = (index, newElement) => {
		setArray(prevValue => [
			...prevValue.slice(0, index),
			newElement,
			...prevValue.slice(index + 1, prevValue.length)
		])
	}

	const remove = (index) => {
		setArray(prevValue => [
			...prevValue.slice(0, index),
			...prevValue.slice(index + 1, prevValue.length - 1)
		])
	}

	const clear = () => setArray([]);

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

export default useArray;