Breaking News: Grepper is joining You.com. Read the official announcement!

useReadLocalStorage react hook

Mehedi Islam Ripon answered on February 10, 2023 Popularity 1/10 Helpfulness 1/10

answer useReadLocalStorage react hook

useReadLocalStorage react hook

Comment

import { useCallback, useEffect, useState } from 'react'

import { useEventListener } from 'usehooks-ts'

type Value<T> = T | null

function useReadLocalStorage<T>(key: string): Value<T> {
  // Get from local storage then
  // parse stored json or return initialValue
  const readValue = useCallback((): Value<T> => {
    // Prevent build error "window is undefined" but keep keep working
    if (typeof window === 'undefined') {
      return null
    }

    try {
      const item = window.localStorage.getItem(key)
      return item ? (JSON.parse(item) as T) : null
    } catch (error) {
      console.warn(`Error reading localStorage key “${key}”:`, error)
      return null
    }
  }, [key])

  // State to store our value
  // Pass initial state function to useState so logic is only executed once
  const [storedValue, setStoredValue] = useState<Value<T>>(readValue)

  // Listen if localStorage changes
  useEffect(() => {
    setStoredValue(readValue())
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const handleStorageChange = useCallback(
    (event: StorageEvent | CustomEvent) => {
      if ((event as StorageEvent)?.key && (event as StorageEvent).key !== key) {
        return
      }
      setStoredValue(readValue())
    },
    [key, readValue],
  )

  // this only works for other documents, not the current one
  useEventListener('storage', handleStorageChange)

  // this is a custom event, triggered in writeValueToLocalStorage
  // See: useLocalStorage()
  useEventListener('local-storage', handleStorageChange)

  return storedValue
}

export default useReadLocalStorage

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: hook javascript

Link to this answer
Share Copy Link

Contributed on Feb 10 2023

Mehedi Islam Ripon

0 Answers Avg Quality 2/10

useReadLocalStorage react hook

Contents

More Related Answers

useReadLocalStorage react hook

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.