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