client: detect window resize

2026-11-02 16:23:15 +08:00 · 2022-05-25 13:39:01 +08:00
parent c7d70f6ee9
commit 2b64a7c09f
1 changed files with 17 additions and 0 deletions
@@ -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,