@thibault.sh/hooks/dist/useSessionStorageState.mjs.map

A comprehensive collection of React hooks for browser storage, UI interactions, and more

{"version":3,"sources":["../src/hooks/useSessionStorageState.ts"],"names":["useSessionStorageState","key","initialValue","readValue","item","error","storedValue","setStoredValue","useState","setValue","value","valueToStore","useEffect"],"mappings":"uCAUO,SAASA,CAA0BC,CAAAA,CAAAA,CAAaC,CAA4D,CAAA,CAGjH,IAAMC,CAAAA,CAAY,IAAS,CACzB,GAAI,OAAO,MAAA,EAAW,WACpB,CAAA,OAAOD,EAGT,GAAI,CACF,IAAME,CAAAA,CAAO,MAAO,CAAA,cAAA,CAAe,QAAQH,CAAG,CAAA,CAC9C,OAAOG,CAAAA,CAAO,IAAK,CAAA,KAAA,CAAMA,CAAI,CAAIF,CAAAA,CACnC,CAASG,MAAAA,CAAAA,CAAO,CACd,OAAA,OAAA,CAAQ,KAAK,CAAqCJ,kCAAAA,EAAAA,CAAG,CAAMI,EAAAA,CAAAA,CAAAA,CAAK,CACzDH,CAAAA,CACT,CACF,CAAA,CAIM,CAACI,CAAAA,CAAaC,CAAc,CAAA,CAAIC,QAAYL,CAAAA,CAAS,EAIrDM,CAAYC,CAAAA,CAAAA,EAA+B,CAC/C,GAAI,CAEF,IAAMC,EAAeD,CAAiB,YAAA,QAAA,CAAWA,CAAMJ,CAAAA,CAAW,CAAII,CAAAA,CAAAA,CAGtEH,EAAeI,CAAY,CAAA,CAGvB,OAAO,MAAA,EAAW,WACpB,EAAA,MAAA,CAAO,cAAe,CAAA,OAAA,CAAQV,CAAK,CAAA,IAAA,CAAK,SAAUU,CAAAA,CAAY,CAAC,EAEnE,OAASN,CAAO,CAAA,CACd,OAAQ,CAAA,IAAA,CAAK,CAAqCJ,kCAAAA,EAAAA,CAAG,KAAMI,CAAK,EAClE,CACF,CAAA,CAEA,OAAAO,SAAAA,CAAU,IAAM,CACdL,CAAAA,CAAeJ,CAAU,EAAC,EAC5B,CAAA,CAAG,EAAE,CAEE,CAAA,CAACG,CAAaG,CAAAA,CAAQ,CAC/B","file":"useSessionStorageState.mjs","sourcesContent":["import { useState, useEffect } from \"react\";\n\n/**\n * Hook for managing state persisted in sessionStorage\n * @param key - The sessionStorage key\n * @param initialValue - The initial value to use if no value exists in storage\n * @returns A tuple containing the current value and a setter function\n * @example\n * const [value, setValue] = useSessionStorageState('my-key', 'initial value');\n */\nexport function useSessionStorageState<T>(key: string, initialValue: T): [T, (value: T | ((val: T) => T)) => void] {\n  // Get from session storage then\n  // parse stored json or return initialValue\n  const readValue = (): T => {\n    if (typeof window === \"undefined\") {\n      return initialValue;\n    }\n\n    try {\n      const item = window.sessionStorage.getItem(key);\n      return item ? JSON.parse(item) : initialValue;\n    } catch (error) {\n      console.warn(`Error reading sessionStorage key \"${key}\":`, error);\n      return initialValue;\n    }\n  };\n\n  // State to store our value\n  // Pass initial state function to useState so logic is only executed once\n  const [storedValue, setStoredValue] = useState<T>(readValue);\n\n  // Return a wrapped version of useState's setter function that ...\n  // ... persists the new value to sessionStorage.\n  const setValue = (value: T | ((val: T) => T)) => {\n    try {\n      // Allow value to be a function so we have same API as useState\n      const valueToStore = value instanceof Function ? value(storedValue) : value;\n\n      // Save to state\n      setStoredValue(valueToStore);\n\n      // Save to session storage\n      if (typeof window !== \"undefined\") {\n        window.sessionStorage.setItem(key, JSON.stringify(valueToStore));\n      }\n    } catch (error) {\n      console.warn(`Error setting sessionStorage key \"${key}\":`, error);\n    }\n  };\n\n  useEffect(() => {\n    setStoredValue(readValue());\n  }, []);\n\n  return [storedValue, setValue];\n}\n"]}