import * as lodash from 'lodash' ; import * as React from 'react' ; interface CustomEvent extends Event { key : string ; value : any ; } const originalSetItem = localStorage . setItem ; localStorage . setItem = function ( key , value , dispatch = true ) { const event = new Event ( 'localStoreUpdate' ) as CustomEvent ; event . value = value ; event . key = key ; if ( dispatch ) document . dispatchEvent ( event ) ; originalSetItem . apply ( this , arguments ) ; } ; export function useLocalStorage < T > ( key , defaultValue = null ) { const [ value , setValue ] = React . useState < T | null > ( ( ) => { const rawVal = localStorage . getItem ( key ) ; if ( ! rawVal ) return defaultValue ; if ( rawVal ?. toLowerCase ( ) === "true" ) return true ; else if ( rawVal ?. toLowerCase ( ) === "false" ) return false ; else { try { return JSON . parse ( rawVal ) ; } catch { return rawVal ; } } } ) ; React . useEffect ( ( ) => { if ( ( typeof value === "object" ) || ( Array . isArray ( value ) ) ) { localStorage . setItem ( key , JSON . stringify ( value ) ) ; } else localStorage . setItem ( key , ( value as unknown ) as string ) ; } , [ value ] ) ; const storageEvent = React . useCallback ( ( e ) => { setValue ( currValue => { if ( ( typeof e . newValue === "object" ) || ( Array . isArray ( e . newValue ) ) ) { const newDat = JSON . parse ( e . newValue ) ; return newDat ; } else { const newDat = e . newValue as unknown as T ; return newDat ; } } ) ; } , [ value ] ) ; const customEvent = React . useCallback ( ( e ) => { if ( e . key === key ) { setValue ( currValue => { if ( ( typeof e . value === "object" ) || ( Array . isArray ( e . value ) ) ) { const newDat = JSON . parse ( e . value ) ; return newDat ; } else { const newDat = e . value as unknown as T ; return newDat ; } } ) ; } } , [ value ] ) ; React . useEffect ( ( ) => { window . addEventListener ( 'storage' , storageEvent ) ; document . addEventListener ( 'localStoreUpdate' , customEvent ) ; return ( ) => { window . removeEventListener ( 'storage' , storageEvent ) ; document . removeEventListener ( 'localStoreUpdate' , customEvent ) ; } ; } , [ value ] ) ; return [ value , setValue ] ; } export const useSettings = useLocalStorage ;