fix: account for SSR

fix: ModalProps interface
gsong · Aug 16, 2024 · 611d2e0 · 611d2e0
1 parent 35bc461
commit 611d2e0
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gsong/react-modal-dialog",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "No-frills modal <dialog> for React",
   "license": "MIT",
   "repository": "github:gsong/react-modal-dialog",

diff --git a/src/index.tsx b/src/index.tsx
@@ -2,11 +2,18 @@ import * as React from "react";
 
 export const useModal = () => {
   const originalStyles = React.useRef<OriginalStyles>({
-    overflow: document.documentElement.style.overflow,
-    scrollbarGutter: document.documentElement.style.scrollbarGutter,
+    overflow: "",
+    scrollbarGutter: "",
   });
   const ref = React.useRef<HTMLDialogElement>(null);
 
+  React.useEffect(() => {
+    originalStyles.current = {
+      overflow: document.documentElement.style.overflow,
+      scrollbarGutter: document.documentElement.style.scrollbarGutter,
+    };
+  }, []);
+
   const openModal = React.useCallback(
     (
       { disableBodyScroll: _disableBodyScroll } = { disableBodyScroll: true },
@@ -67,13 +74,17 @@ export const useModal = () => {
 };
 
 const disableBodyScroll = () => {
-  document.documentElement.style.overflow = "hidden";
-  document.documentElement.style.scrollbarGutter = "stable";
+  if (typeof window !== "undefined") {
+    document.documentElement.style.overflow = "hidden";
+    document.documentElement.style.scrollbarGutter = "stable";
+  }
 };
 
 const enableBodyScroll = ({ overflow, scrollbarGutter }: OriginalStyles) => {
-  document.documentElement.style.overflow = overflow;
-  document.documentElement.style.scrollbarGutter = scrollbarGutter;
+  if (typeof window !== "undefined") {
+    document.documentElement.style.overflow = overflow;
+    document.documentElement.style.scrollbarGutter = scrollbarGutter;
+  }
 };
 
 const clickedInCurrentTarget = (
@@ -90,7 +101,7 @@ interface OriginalStyles {
   scrollbarGutter: string;
 }
 
-interface ModalProps {
+interface ModalProps extends React.HTMLAttributes<HTMLDialogElement> {
   allowDismiss?: boolean;
   onDismiss?: (event: React.MouseEvent<HTMLDialogElement, MouseEvent>) => void;
   onCancel?: (event: React.SyntheticEvent<HTMLDialogElement, Event>) => void;