@keycloakify/keycloak-account-ui/ui-shared/utils/useStorageItem.js

<p align="center"> <img src="https://github.com/user-attachments/assets/e31c4910-7205-441c-9a35-e134b806b3a8"> </p> <p align="center"> <i>Repackaged Keycloak Account UI</i> <br> <br> <a href="https://github.com/keycloakify/keycloak-a

import { useCallback, useEffect, useState } from "react";
/**
 * A hook that allows you to get a specific item stored by the [Web Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API).
 * Automatically updates the value when modified in the context of another document (such as an open tab) trough the [`storage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event) event.
 *
 * @param storageArea The storage area to target, must implement the [`Storage`](https://developer.mozilla.org/en-US/docs/Web/API/Storage) interface (such as [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) and [`sessionStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage)).
 * @param keyName The key of the item to get from storage, same as passed to [`Storage.getItem()`](https://developer.mozilla.org/en-US/docs/Web/API/Storage/getItem)
 * @param The default value to fall back to in case no stored value was retrieved.
 */
export function useStorageItem(storageArea, keyName, defaultValue) {
    const [value, setInnerValue] = useState(() => { var _a; return (_a = storageArea.getItem(keyName)) !== null && _a !== void 0 ? _a : defaultValue; });
    const setValue = useCallback((newValue) => {
        setInnerValue(newValue);
        storageArea.setItem(keyName, newValue);
    }, []);
    useEffect(() => {
        var _a;
        // If the key name or storage area has changed, we want to update the value.
        // React will only set state if it actually changed, so no need to worry about re-renders.
        setInnerValue((_a = storageArea.getItem(keyName)) !== null && _a !== void 0 ? _a : defaultValue);
        // Subscribe to storage events so we can update the value when it is changed within the context of another document.
        window.addEventListener("storage", handleStorage);
        function handleStorage(event) {
            var _a;
            // If the affected storage area is different we can ignore this event.
            // For example, if we're using session storage we're not interested in changes from local storage.
            if (event.storageArea !== storageArea) {
                return;
            }
            // If the event key is null then it means all storage was cleared.
            // Therefore we're interested in keys that are, or that match the key name.
            if (event.key === null || event.key === keyName) {
                setInnerValue((_a = event.newValue) !== null && _a !== void 0 ? _a : defaultValue);
            }
        }
        return () => window.removeEventListener("storage", handleStorage);
    }, [storageArea, keyName]);
    return [value, setValue];
}
//# sourceMappingURL=useStorageItem.js.map