Use localStorage Hook for TypeScript

useLocalStorage.ts

import { useState, useEffect } from 'react'

const getStorageValue = <T>(key: string, defaultValue?: T): T | undefined => {
	const fallback = defaultValue || undefined
	if (typeof window === 'undefined') return fallback

	const value = localStorage.getItem(key)
	if (value === null) return fallback

	try {
		return JSON.parse(value)
	} catch (err) {
		return fallback
	}
}

const setStorageValue = <T>(key: string, value: T): T | undefined => {
	if (typeof window === 'undefined') return undefined

	localStorage.setItem(key, JSON.stringify(value))
	return value
}
const removeStorageValue = (key: string): undefined => {
	if (typeof window === 'undefined') return

	localStorage.removeItem(key)
}

export const useLocalStorage = function <T>(
	key: string,
	defaultValue?: T
): {
	value: T | undefined
	setValue: React.Dispatch<T>
	removeValue: (key: string) => undefined
} {
	const [value, setValue] = useState(() => {
		return getStorageValue(key, defaultValue)
	})

	const removeValue = (key: string): undefined => removeStorageValue(key)

	useEffect(() => {
		setStorageValue(key, value)
	}, [key, value])

	return {
		value,
		setValue,
		removeValue,
	}
}