From 37140bf9e1d648a65f045b6da5909494210f0401 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 15 Sep 2020 04:15:01 -0700
Subject: [PATCH] Lock scrolling when modal is open

---
 src/App.css    | 4 ++++
 src/Portal.tsx | 2 ++
 2 files changed, 6 insertions(+)

diff --git a/src/App.css b/src/App.css
index 5775252a..38901a4b 100644
--- a/src/App.css
+++ b/src/App.css
@@ -4,6 +4,10 @@ html {
     padding: 16px;
 }
 
+body.no-scroll {
+    overflow: hidden;
+}
+
 a {
     text-decoration: none;
 }
diff --git a/src/Portal.tsx b/src/Portal.tsx
index b61a47c5..f684fe11 100644
--- a/src/Portal.tsx
+++ b/src/Portal.tsx
@@ -27,11 +27,13 @@ const Portal = ({ children }) => {
     useEffect(() => {
         modalRoot.appendChild(modalDiv.current)
         return () => {
+            document.body.classList.remove('no-scroll')
             return modalRoot.removeChild(modalDiv.current)
         }
     }, [modalDiv, modalRoot])
 
     if (modalDiv.current) {
+        document.body.classList.add('no-scroll')
         return createPortal(children, modalDiv.current)
     }