Merge pull request #610 from pixiv/toshusai/fix-modal-does-not-work-i…

…n-server-side fix: modalがサーバーサイドで利用できない問題を修正
pixiv · Jul 26, 2024 · 43f410b · 43f410b
2 parents 963d84d + 5131dad
commit 43f410b
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/packages/react/src/components/Modal/index.tsx b/packages/react/src/components/Modal/index.tsx
@@ -95,7 +95,7 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(function ModalInner(
     ref
   )
 
-  const isMobile = useWindowWidth() < 744
+  const isMobile = (useWindowWidth() ?? Infinity) < 744
   const transitionEnabled = isMobile && bottomSheet !== false
   const showDismiss = !isMobile || bottomSheet !== true
 

diff --git a/packages/react/src/components/Modal/useCustomModalOverlay.tsx b/packages/react/src/components/Modal/useCustomModalOverlay.tsx
@@ -47,8 +47,14 @@ export function useCharcoalModalOverlay(
   }
 }
 
+function isWindowDefined() {
+  return typeof window !== 'undefined'
+}
+
 export function useWindowWidth() {
-  const [width, setWidth] = React.useState(window.innerWidth)
+  const [width, setWidth] = React.useState(
+    isWindowDefined() ? window.innerWidth : null
+  )
   React.useEffect(() => {
     const handleResize = () => {
       setWidth(window.innerWidth)