useArray

React hook to manage and manipulate arrays.

Add the hook via the CLI:

npm

npx @novajslabs/cli add useArray

yarn

npx @novajslabs/cli add useArray

pnpm

pnpm dlx @novajslabs/cli add useArray

Or copy and paste the code into your project:

TypeScript

import { useState } from "react";

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

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

  const filter = (callback: (element: T) => boolean) => {
    setArray((prev) => prev.filter(callback));
  };

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

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

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

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

JavaScript

import { useState } from "react";

export default function useArray(initialArray) {
  const [array, setArray] = useState(initialArray);

  const push = (element) => {
    setArray([...array, element]);
  };

  const filter = (callback) => {
    setArray(array.filter(callback));
  };

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

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

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

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

Requirements

React 16.8 or higher

Parameters

initialArray required

• Type: T[]

The array to manage and manipulate.

Return values

array

Type: T[]

The current state of the array.

set

Type: (newArray: T[]) => void

Function to directly set a new array.

push

Type: (element: T) => void

Adds a new element to the end of the array.

filter

Type: (callback: (element: T) => boolean) => void

Filters the array based on a provided callback function.

update

Type: (index: number, newElement: T) => void

Updates the element at a specific index.

remove

Type: (index: number) => void

Removes the element at a specific index.

clear

Type: () => void

Clears all elements in the array.

Example

import { useArray } from "./hooks/useArray";

const App = () => {
  const { array, set, push, remove, filter, update, clear } = useArray([
    1, 2, 3,
  ]);

  return (
    <div>
      <div>{array.join(", ")}</div>
      <button onClick={() => push(7)}>Add 7</button>
      <button onClick={() => update(1, 9)}>Change Second Element To 9</button>
      <button onClick={() => remove(1)}>Remove Second Element</button>
      <button onClick={() => filter((n) => n < 4)}>
        Keep Numbers Less Than 4
      </button>
      <button onClick={() => set([1, 2, 3])}>Set To 1, 2, 3</button>
      <button onClick={clear}>Clear</button>
    </div>
  );
};

export default App;

Use cases

Here are some use cases where this React hook is useful:

• Track a list of items in a shopping cart
• Replace an array of selected files in a file upload component
• Add a new user input to a list of form responses
• Remove all completed tasks from a to-do list
• Modify a specific user's profile information in an array of users
• Delete a selected image from an array of uploaded images