codedsaif-react-hooks/hooks/useLocalStorage.js

To make it easy for you to get started with GitLab, here's a list of recommended next steps.

import { useState } from "react";

/**
 * Custom hook to persist state in localStorage.
 * @param {string} key - The localStorage key to store the value under.
 * @param {*} initialValue - The initial value to use if none is found in localStorage.
 * @returns {[any, function]} - Returns the stored value and a setter function.
 * @example
 * function Dropdown() {
 *   const [theme, setTheme] = useLocalStorage("theme", "light");
 *   useEffect(() => {
 *     document.body.className = theme;
 *   }, [theme]);
 *   return (
 *     <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
 *       Toggle Theme
 *     </button>
 *   );
 * }
 */
function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error("Error reading localStorage", error);
      return initialValue;
    }
  });

  const setValue = (value) => {
    try {
      setStoredValue(value);
      window.localStorage.setItem(key, JSON.stringify(value));
    } catch (error) {
      console.error("Error setting localStorage", error);
    }
  };

  return [storedValue, setValue];
}

export default useLocalStorage;