import React , { createContext , useContext , useCallback , useState } from "react" ; export interface IMobileMenuState { isMobileMenuOpen : boolean ; toggleMobileMenu : ( ) => void ; setMobileMenuOpen : ( open : boolean ) => void ; } const DEFAULT_STATE = { isMobileMenuOpen : false , toggleMobileMenu : ( ) => { } , setMobileMenuOpen : ( _ ) => { } , } ; export const MobileMenuContext = createContext ( DEFAULT_STATE ) ; export const MobileMenuContextProvider = ( { children , ... rest } ) => { const [ isMobileMenuOpen , setMobileMenuOpen ] = useState ( false ) ; const toggleMobileMenu = useCallback ( ( ) => setMobileMenuOpen ( ( prev ) => ! prev ) , [ ] ) ; const stateValue = { isMobileMenuOpen , setMobileMenuOpen , toggleMobileMenu , } ; return ( < MobileMenuContext . Provider value = { stateValue } { ... rest } > { children } < /MobileMenuContext.Provider>); } ; export const useMobileMenuContext = ( ) => useContext ( MobileMenuContext ) ;