From 611d2e007d2f1ffe8397b8d6bbf52c645ad171f6 Mon Sep 17 00:00:00 2001
From: George Song <george@gsong.dev>
Date: Fri, 16 Aug 2024 06:20:23 -0700
Subject: [PATCH] fix: account for SSR

fix: ModalProps interface
---
 package.json  |  2 +-
 src/index.tsx | 25 ++++++++++++++++++-------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index e296c3c..d2f9128 100644
--- 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
index e0a85b2..2e5342c 100644
--- 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;