joseph izang
3 years ago
parent
d72b8526a2
commit
b51c8c1fa4
@ -1,36 +1,115 @@ |
||||
import { useState } from 'react' |
||||
// import { useState } from 'react'
|
||||
|
||||
// // Hook
|
||||
// export const useLocalStorage = (key: string, initialValue: any) => {
|
||||
// // State to store our value
|
||||
// // Pass initial state function to useState so logic is only executed once
|
||||
// const [storedValue, setStoredValue] = useState<any>(() => {
|
||||
// try {
|
||||
// // Get from local storage by key
|
||||
// const item = window.localStorage.getItem(key)
|
||||
// // Parse stored json or if none return initialValue
|
||||
// return item ? JSON.parse(item) : initialValue
|
||||
// } catch (error) {
|
||||
// // If error also return initialValue
|
||||
// console.log(error)
|
||||
// return initialValue
|
||||
// }
|
||||
// })
|
||||
// // Return a wrapped version of useState's setter function that ...
|
||||
// // ... persists the new value to localStorage.
|
||||
// const setValue = (value: any | ((val: any) => any)) => {
|
||||
// try {
|
||||
// // Allow value to be a function so we have same API as useState
|
||||
// const valueToStore =
|
||||
// value instanceof Function ? value(storedValue) : value
|
||||
// // Save state
|
||||
// setStoredValue(valueToStore)
|
||||
// // Save to local storage
|
||||
// window.localStorage.setItem(key, JSON.stringify(valueToStore))
|
||||
// } catch (error) {
|
||||
// // A more advanced implementation would handle the error case
|
||||
// console.log(error)
|
||||
// }
|
||||
// }
|
||||
// return [storedValue, setValue] as const
|
||||
// }
|
||||
|
||||
import { Dispatch, SetStateAction, useEffect, useState } from 'react' |
||||
|
||||
type SetValue<T> = Dispatch<SetStateAction<T>> |
||||
|
||||
function useLocalStorage<T> (key: string, initialValue: T): [T, SetValue<T>] { |
||||
// Get from local storage then
|
||||
// parse stored json or return initialValue
|
||||
const readValue = (): T => { |
||||
// Prevent build error "window is undefined" but keep keep working
|
||||
if (typeof window === 'undefined') { |
||||
return initialValue |
||||
} |
||||
|
||||
// Hook
|
||||
export const useLocalStorage = (key: string, initialValue: any) => { |
||||
// State to store our value
|
||||
// Pass initial state function to useState so logic is only executed once
|
||||
const [storedValue, setStoredValue] = useState<any>(() => { |
||||
try { |
||||
// Get from local storage by key
|
||||
const item = window.localStorage.getItem(key) |
||||
// Parse stored json or if none return initialValue
|
||||
return item ? JSON.parse(item) : initialValue |
||||
return item ? (JSON.parse(item) as T) : initialValue |
||||
} catch (error) { |
||||
// If error also return initialValue
|
||||
console.log(error) |
||||
console.warn(`Error reading localStorage key “${key}”:`, error) |
||||
return initialValue |
||||
} |
||||
}) |
||||
} |
||||
|
||||
// State to store our value
|
||||
// Pass initial state function to useState so logic is only executed once
|
||||
const [storedValue, setStoredValue] = useState<T>(readValue) |
||||
|
||||
// Return a wrapped version of useState's setter function that ...
|
||||
// ... persists the new value to localStorage.
|
||||
const setValue = (value: any | ((val: any) => any)) => { |
||||
const setValue: SetValue<T> = value => { |
||||
// Prevent build error "window is undefined" but keeps working
|
||||
if (typeof window === 'undefined') { |
||||
console.warn( |
||||
`Tried setting localStorage key “${key}” even though environment is not a client` |
||||
) |
||||
} |
||||
|
||||
try { |
||||
// Allow value to be a function so we have same API as useState
|
||||
const valueToStore = |
||||
value instanceof Function ? value(storedValue) : value |
||||
// Save state
|
||||
setStoredValue(valueToStore) |
||||
// Allow value to be a function so we have the same API as useState
|
||||
const newValue = value instanceof Function ? value(storedValue) : value |
||||
|
||||
// Save to local storage
|
||||
window.localStorage.setItem(key, JSON.stringify(valueToStore)) |
||||
window.localStorage.setItem(key, JSON.stringify(newValue)) |
||||
|
||||
// Save state
|
||||
setStoredValue(newValue) |
||||
|
||||
// We dispatch a custom event so every useLocalStorage hook are notified
|
||||
window.dispatchEvent(new Event('local-storage')) |
||||
} catch (error) { |
||||
// A more advanced implementation would handle the error case
|
||||
console.log(error) |
||||
console.warn(`Error setting localStorage key “${key}”:`, error) |
||||
} |
||||
} |
||||
return [storedValue, setValue] as const |
||||
|
||||
useEffect(() => { |
||||
setStoredValue(readValue()) |
||||
}, []) |
||||
|
||||
useEffect(() => { |
||||
const handleStorageChange = () => { |
||||
setStoredValue(readValue()) |
||||
} |
||||
|
||||
// this only works for other documents, not the current one
|
||||
window.addEventListener('storage', handleStorageChange) |
||||
|
||||
// this is a custom event, triggered in writeValueToLocalStorage
|
||||
window.addEventListener('local-storage', handleStorageChange) |
||||
|
||||
return () => { |
||||
window.removeEventListener('storage', handleStorageChange) |
||||
window.removeEventListener('local-storage', handleStorageChange) |
||||
} |
||||
}, []) |
||||
|
||||
return [storedValue, setValue] |
||||
} |
||||
|
||||
export default useLocalStorage |
||||
|
||||
@ -1,15 +0,0 @@ |
||||
{ |
||||
"extends": "./tsconfig.json", |
||||
"compilerOptions": { |
||||
"outDir": "../../../dist/out-tsc", |
||||
"module": "commonjs", |
||||
"types": ["jest", "node"] |
||||
}, |
||||
"include": [ |
||||
"**/*.spec.ts", |
||||
"**/*.spec.tsx", |
||||
"**/*.spec.js", |
||||
"**/*.spec.jsx", |
||||
"**/*.d.ts" |
||||
] |
||||
} |
||||
Loading…
Reference in new issue