gio
/
think
mirror of https://github.com/fantasticit/think.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

client: detect window resize

This commit is contained in:
fantasticit 2022-05-25 13:39:01 +08:00
parent c7d70f6ee9
commit 2b64a7c09f
1 changed files with 17 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
packages/client/src/hooks/use-on-mobile.tsx
View File

@ -1,8 +1,25 @@
import { useEffect } from 'react';
import { createGlobalHook } from './create-global-hook'; import { createGlobalHook } from './create-global-hook';
import { useToggle } from './use-toggle'; import { useToggle } from './use-toggle';
const PC_MOBILE_CRITICAL_WIDTH = 765;
const useOnMobile = (defaultIsMobile) => { const useOnMobile = (defaultIsMobile) => {
const [isMobile, toggleIsMobile] = useToggle(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 { return {
isMobile, isMobile,
toggleIsMobile, toggleIsMobile,