React: useLocalStorageState hook

readme.md

Usage

A drop-in replacement for useState if you want to persist your state to localStorage

interface Item {
  qty: number
  product: {
    id: number
    name: string
    price: number
  }
}

const Hello = () => {
-  const [value, setValue] = useState<Item[]>('cart', [])
+  const [value, setValue] = useLocalStorageState<Item[]>('cart', [])
  // ...
}

index.tsx

import { useState } from 'react'

const useLocalStorageState = <T>(key: string, defaultValue?: T): [T, (value: T) => void] => {
  const [state, internalSetState] = useState<T>(() => {
    try {
      const value = localStorage.getItem(key)
      if (value) return JSON.parse(value)
    } catch (e) {
      console.error(e)
    }

    return defaultValue
  })

  const setLocalStorageState = value => {
    internalSetState(value)
    localStorage.setItem(key, JSON.stringify(value))
  }

  return [state, setLocalStorageState]
}

export { useLocalStorageState }