diff --git a/packages/client/src/hooks/use-on-mobile.tsx b/packages/client/src/hooks/use-on-mobile.tsx index 04d20195..174f6d2a 100644 --- a/packages/client/src/hooks/use-on-mobile.tsx +++ b/packages/client/src/hooks/use-on-mobile.tsx @@ -1,8 +1,25 @@ +import { useEffect } from 'react'; + import { createGlobalHook } from './create-global-hook'; import { useToggle } from './use-toggle'; +const PC_MOBILE_CRITICAL_WIDTH = 765; + const useOnMobile = (defaultIsMobile) => { const [isMobile, toggleIsMobile] = useToggle(defaultIsMobile); + + useEffect(() => { + function handleResize() { + toggleIsMobile(window.innerWidth <= PC_MOBILE_CRITICAL_WIDTH); + } + + window.addEventListener('resize', handleResize); + + return () => { + window.removeEventListener('resize', handleResize); + }; + }, [toggleIsMobile]); + return { isMobile, toggleIsMobile,