import { useState , useEffect } from "react" ; interface Props { key : string ; } interface UseLocalStorage { value : string ; setValue : ( value : string ) => void ; getValue : ( ) => string ; } export function useLocalStorage < UseLocalStorage > ( props ) { const [ localValue , setLocalValue ] = useState < any > ( ) ; useEffect ( ( ) => { const currentValue = localStorage . getItem ( props . key ) ; setLocalValue ( currentValue ) ; } , [ props . key ] ) ; const getValue = ( ) => { const item = localStorage . getItem ( props . key ) ; if ( item ) { setLocalValue ( JSON . parse ( item ) ) ; return JSON . parse ( item ) ; } return null ; } ; const setValue = ( newValue ) => { setLocalValue ( newValue ) ; localStorage . setItem ( props . key , JSON . stringify ( newValue ) ) ; } ; return { value : localValue , getValue , setValue , } ; }