uselocalstorage-ts/dist/index.js

React hook to work with localstorage, written in Typescript.

import { useEffect, useCallback, useSyncExternalStore } from 'react';

// src/useLocalStorage/useLocalStorage.ts
var setValueForLocalStorage = (key, newValue) => {
  try {
    if (newValue instanceof Function) {
      const oldValue = localStorage.getItem(key);
      if (oldValue) {
        const parsedOldValue = JSON.parse(oldValue);
        const value = newValue(parsedOldValue);
        localStorage.setItem(key, JSON.stringify(value));
        window.dispatchEvent(
          new StorageEvent("storage", {
            key
          })
        );
      } else {
        throw new Error("Cannot get prev value for function to apply");
      }
    } else {
      const value = JSON.stringify(newValue);
      localStorage.setItem(key, value);
      window.dispatchEvent(
        new StorageEvent("storage", {
          key
        })
      );
    }
  } catch (error) {
    console.error(error.message);
    throw new Error(
      "Failed to set value in localStorage, because its key is empty"
    );
  }
};
var removeKeyFromLocalStorage = (key) => {
  try {
    localStorage.removeItem(key);
    window.dispatchEvent(
      new StorageEvent("storage", {
        key
      })
    );
  } catch (error) {
    console.error(error.message);
  }
};
var removeKeysFromLocalStorage = (keys) => {
  try {
    keys.forEach((key) => {
      localStorage.removeItem(key);
      window.dispatchEvent(
        new StorageEvent("storage", {
          key
        })
      );
    });
  } catch (error) {
    console.error(error.message);
  }
};
var clearLocalStorage = () => {
  try {
    Object.keys(localStorage).forEach((key) => {
      localStorage.removeItem(key);
      window.dispatchEvent(
        new StorageEvent("storage", {
          key
        })
      );
    });
  } catch (error) {
    console.error(error.message);
    throw new Error("Cannot clear local storage!");
  }
};
function useLocalStorage(key, initValue) {
  const initialValue = initValue instanceof Function ? initValue() : initValue;
  useEffect(() => {
    setValueForLocalStorage(key, initialValue);
  }, []);
  const subscribe = useCallback(
    (callback) => {
      const handleStorageChange = (event) => {
        if (event.key === key) {
          callback();
        }
      };
      window.addEventListener("storage", handleStorageChange);
      return () => {
        window.removeEventListener("storage", handleStorageChange);
      };
    },
    [key]
  );
  const getSnapshot = () => {
    const storedValue = localStorage.getItem(key);
    try {
      if (storedValue) {
        return JSON.parse(storedValue);
      } else {
        return initialValue;
      }
    } catch (error) {
      console.error(
        `Failed to parse stored value for key "${key}": ${error.message}`
      );
      if (storedValue === "undefined") {
        return void 0;
      } else if (storedValue === null) {
        return null;
      }
      return initialValue;
    }
  };
  return useSyncExternalStore(subscribe, getSnapshot);
}

export { clearLocalStorage, removeKeyFromLocalStorage, removeKeysFromLocalStorage, setValueForLocalStorage, useLocalStorage };