Do not render Viewport in SSR context

Author: OlegWock

.size-snapshot.json

@@ -1,37 +1,37 @@
 {
   "react-local-toast.cjs.development.js": {
-    "bundled": 19783,
-    "minified": 9879,
-    "gzipped": 3030
+    "bundled": 19762,
+    "minified": 9871,
+    "gzipped": 3037
   },
   "react-local-toast.cjs.production.js": {
-    "bundled": 19783,
-    "minified": 9879,
-    "gzipped": 3030
+    "bundled": 19762,
+    "minified": 9871,
+    "gzipped": 3037
   },
   "react-local-toast.esm.js": {
-    "bundled": 18568,
-    "minified": 8887,
-    "gzipped": 2876,
+    "bundled": 18547,
+    "minified": 8879,
+    "gzipped": 2886,
     "treeshaked": {
       "rollup": {
         "code": 262,
         "import_statements": 262
       },
       "webpack": {
-        "code": 8771
+        "code": 8763
       }
     }
   },
   "react-local-toast.umd.development.js": {
-    "bundled": 110107,
-    "minified": 34491,
-    "gzipped": 11268
+    "bundled": 110082,
+    "minified": 34483,
+    "gzipped": 11267
   },
   "react-local-toast.umd.production.js": {
-    "bundled": 59579,
-    "minified": 21497,
-    "gzipped": 7178
+    "bundled": 59554,
+    "minified": 21489,
+    "gzipped": 7176
   },
   "internals.js": {
     "bundled": 10559,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-local-toast",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "Local toast helps you to provide feedback related to particular components on page",
   "main": "dist/index.js",
   "module": "dist/react-local-toast.esm.js",
@@ -97,4 +97,4 @@
     "shx": "0.3.3",
     "typescript": "4.3.5"
   }
-}
+}

src/provider.tsx

@@ -106,6 +106,12 @@ export const createProvider = <T,>(
             });
         };
 
+        // Document is unavailable in Next.js SSR, so postpone actual rendering of viewport (portal)
+        const [mounted, setMounted] = React.useState(false);
+        React.useEffect(() => {
+            setMounted(true);
+        }, []);
+
         return (
             <Context.Provider
                 value={{
@@ -125,7 +131,7 @@ export const createProvider = <T,>(
                 }}
             >
                 {children}
-                <Viewport portalInto={portalInto} />
+                {mounted && <Viewport portalInto={portalInto} />}
             </Context.Provider>
         );
     };

src/viewport.tsx

@@ -128,12 +128,6 @@ export const createViewport = <T,>(context: Context<LocalToastContextType<T>>) =
             );
         };
 
-        // Document is unavailable in Next.js SSR, so postpone actual rendering of portal
-        const [mounted, setMounted] = React.useState(false);
-        React.useEffect(() => {
-            setMounted(true);
-        }, []);
-
         // We don't really need window size, but we need to re-render once window size changes
         const [width, height] = useWindowSize();
 
@@ -216,8 +210,6 @@ export const createViewport = <T,>(context: Context<LocalToastContextType<T>>) =
             }
         });
 
-        if (!mounted) return null;
-
         return ReactDOM.createPortal(
             <>
                 <TransitionGroup component={null}>{toasts.map(renderToast)}</TransitionGroup>