mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
add new custom hooks
This commit is contained in:
parent
88e78afe5e
commit
2949d101b6
42
src/@hooks/useLocalStorage.ts
Normal file
42
src/@hooks/useLocalStorage.ts
Normal file
@ -0,0 +1,42 @@
|
||||
import { useState } from 'react'
|
||||
|
||||
function useLocalStorage<T>(key: string, initialValue: T) {
|
||||
// State to store our value
|
||||
// Pass initial state function to useState so logic is only executed once
|
||||
const [storedValue, setStoredValue] = useState<T>(() => {
|
||||
if (typeof window === 'undefined') {
|
||||
return initialValue
|
||||
}
|
||||
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: T | ((val: T) => T)) => {
|
||||
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
|
||||
if (typeof window !== 'undefined') {
|
||||
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
|
||||
}
|
||||
|
||||
export default useLocalStorage
|
15
src/@hooks/usePrevious.ts
Normal file
15
src/@hooks/usePrevious.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
|
||||
function usePrevious<T>(value: T): T {
|
||||
// The ref object is a generic container whose current property is mutable ...
|
||||
// ... and can hold any value, similar to an instance property on a class
|
||||
const ref: any = useRef<T>()
|
||||
// Store current value in ref
|
||||
useEffect(() => {
|
||||
ref.current = value
|
||||
}, [value]) // Only re-run if value changes
|
||||
// Return previous value (happens before update in useEffect above)
|
||||
return ref.current
|
||||
}
|
||||
|
||||
export default usePrevious
|
Loading…
Reference in New Issue
Block a user