@supunlakmal/hooks
Version:
A collection of reusable React hooks
56 lines • 2.49 kB
JavaScript
import { useCallback, useMemo } from 'react';
import { useLocalStorage } from './useLocalStorage'; // Import the existing hook
/**
* Manages a stateful queue (First-In, First-Out) persisted in Local Storage.
* Utilizes the `useLocalStorage` hook internally.
*
* @template T The type of items the queue will hold. Must be JSON-serializable.
* @param key The key to use for storing the queue in Local Storage.
* @param initialValue An optional initial array to use if nothing is in Local Storage for the key.
* @returns An object containing the queue state and methods to interact with it.
*/
export function useLocalStorageQueue(key, initialValue = []) {
// Use the useLocalStorage hook to manage the queue array
// The third argument to useLocalStorage handles options like raw storage or custom serializers if needed
const [queue, setQueue] = useLocalStorage(key, initialValue);
/** Adds an item to the end of the queue. */
const add = useCallback((item) => {
setQueue((prevQueue) => [...(prevQueue || []), item]); // Handle potential null/undefined from storage initially
}, [setQueue]);
/** Removes the item from the front of the queue. */
const remove = useCallback(() => {
setQueue((prevQueue) => {
if (!prevQueue || prevQueue.length === 0) {
return [];
}
// Return new array excluding the first item
return prevQueue.slice(1);
});
}, [setQueue]);
/** Returns the item at the front of the queue without removing it. */
const peek = useCallback(() => {
return queue === null || queue === void 0 ? void 0 : queue[0];
}, [queue]);
/** Removes all items from the queue. */
const clear = useCallback(() => {
setQueue([]);
}, [setQueue]);
// Memoize derived values
// Ensure queue is treated as an empty array if null/undefined from storage initially
const currentQueue = queue || [];
const size = useMemo(() => currentQueue.length, [currentQueue]);
const first = useMemo(() => currentQueue[0], [currentQueue]);
const last = useMemo(() => currentQueue[currentQueue.length - 1], [currentQueue]);
// Return the state and the memoized methods
return {
add,
remove,
peek,
size,
first,
last,
queue: currentQueue, // Provide read-only access to the current queue state
clear,
};
}
//# sourceMappingURL=useLocalStorageQueue.js.map