rooks/dist/esm/hooks/useArrayState.js

Essential React custom hooks ⚓ to super charge your components!

var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
        if (ar || !(i in from)) {
            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
            ar[i] = from[i];
        }
    }
    return to.concat(ar || Array.prototype.slice.call(from));
};
import { useCallback, useMemo, useState } from "react";
/**
 * useArrayState
 * @description Array state manager hook for React
 * @param {Array<T>} initialState Initial state of the array
 * @returns {UseArrayStateReturnValue<T>} Array state manager hook for React
 * @see {@link https://react-hooks.org/docs/useArrayState}
 *
 * @example
 *
 * const [array, controls] = useArrayState([1, 2, 3]);
 *
 * controls.push(4); // [1, 2, 3, 4]
 * controls.pop(); // [1, 2, 3]
 * controls.unshift(0); // [0, 1, 2, 3]
 * controls.shift(); // [1, 2, 3]
 * controls.reverse(); // [3, 2, 1]
 * controls.concat([4, 5, 6]); // [3, 2, 1, 4, 5, 6]
 * controls.fill(0); // [0, 0, 0, 0, 0, 0]
 */
function useArrayState(initialArray) {
    if (initialArray === void 0) { initialArray = []; }
    var _a = useState(initialArray), array = _a[0], setArray = _a[1];
    var push = useCallback(function (value) {
        setArray(__spreadArray(__spreadArray([], array, true), [value], false));
    }, [array]);
    var pop = useCallback(function () {
        setArray(array.slice(0, array.length - 1));
    }, [array]);
    var clear = useCallback(function () {
        setArray([]);
    }, []);
    var unshift = useCallback(function (value) {
        setArray(__spreadArray([value], array, true));
    }, [array]);
    var shift = useCallback(function () {
        setArray(array.slice(1));
    }, [array]);
    var reverse = useCallback(function () {
        setArray(__spreadArray([], array, true).reverse());
    }, [array]);
    var concat = useCallback(function (value) {
        setArray(__spreadArray(__spreadArray([], array, true), value, true));
    }, [array]);
    var fill = useCallback(function (value, start, end) {
        setArray(__spreadArray([], array, true).fill(value, start, end));
    }, [array]);
    var controls = useMemo(function () {
        return {
            push: push,
            pop: pop,
            clear: clear,
            unshift: unshift,
            shift: shift,
            reverse: reverse,
            concat: concat,
            fill: fill,
        };
    }, [push, pop, clear, unshift, shift, reverse, concat, fill]);
    var returnValue = useMemo(function () {
        return [array, controls];
    }, [array, controls]);
    return returnValue;
}
export { useArrayState };