Merge pull request #2 from rob2d/features/support-ssr

Support SSR; closes issue #1

Author: rob2d

README.md

@@ -9,10 +9,11 @@ npm install -D use-viewport-sizes
 ```
 
 ## Benefits
-- extremely lightweight and dependency-free; **2.54kb pre-gzipped** with all dependencies.
+- extremely lightweight and dependency-free; **2.59kb pre-gzipped** with all dependencies.
 - only one `window.onresize` handler used to subscribe to any changes in an unlimited number of components.
 - optional debounce to delay updates until user stops dragging their window for a moment; this can make expensive components with size-dependent calculations run much faster and your app feel smoother.
 - debouncing does not create new handlers or waste re-renders in your component; the results are also pooled from only one resize result.
+- supports SSR.
 
 ## Usage ##
 
@@ -24,6 +25,7 @@ npm install -D use-viewport-sizes
 *registers dimension changes on every resize event immediately*
 
 ```
+import React from 'react'
 import useViewportSizes from 'use-viewport-sizes'
 
 function MyComponent (props) {
@@ -38,6 +40,7 @@ function MyComponent (props) {
 *registers dimension changes only when a user stops dragging/resizing the window for a specified number of miliseconds; for expensive components such as data grids which may be too
 expensive to re-render during window resize dragging.*
 ```
+import React from 'react'
 import useViewportSizes from 'use-viewport-sizes'
 
 function MyExpensivelyRenderedComponent (props) {
@@ -47,3 +50,25 @@ function MyExpensivelyRenderedComponent (props) {
 }
 ```
 
+### **Server Side Rendering**  
+
+*While serverside rendering is supported, it requires an explicit update via `useEffect` since viewport does not actually exist on the server before rendering to client. The following has been tested with [NextJS](https://nextjs.org/).*
+
+*Sidenote that you will see a `useLayoutEffect` warning from React. This is perfectly normal as there is no viewport/context to paint to when pre-rendering in SSR and will not interfere with your app once served to the client*
+
+```
+import React, { useLayoutEffect } from 'react'
+import useViewportSizes from 'use-viewport-sizes'
+
+function MySSRComponent (props) {
+    const [vpWidth, vpHeight, updateVpSizes] = useViewportSizes()
+
+    // below, we add one post-render update
+    // in order to register the client's viewport sizes
+    // after serving SSR content
+
+    useEffect(()=> { updateVpSizes(); }, []);
+
+    ...renderLogic
+}
+```

build/index.js

@@ -1,6 +1,6 @@
 {
   "name": "use-viewport-sizes",
-  "version": "0.1.10",
+  "version": "0.2.0",
   "description": "tiny React hook which allows you to track visible window viewport size in your components w/ an optional debounce for updates for optimal rendering.",
   "main": "build/index.js",
   "scripts": {

package.json

@@ -6,48 +6,62 @@ import { useState, useEffect, useMemo } from "react"
 
 var { documentElement } = window.document;
 
-let something;
-
 function getVpWidth () {
-    return Math.max(
+    return (typeof window != 'undefined') ? Math.max(
         documentElement.clientWidth, 
         window.innerWidth || 0
-      );
+      ) : 0;
 }
 
 
 function getVpHeight () {
-    return Math.max(
+    return (typeof window != 'undefined') ? Math.max(
         documentElement.clientHeight,
         window.innerHeight || 0
-    );
+    ) : 0;
 }
 
 // =============== //
 //  Shared State   //
 // =============== //
 
+// using separate variables since Babel
+// transpilation saves a bit of filesize
+
 var listeners = new Set();
-var vpW = getVpWidth();
-var vpH = getVpHeight();
+var vpW = 0;
+var vpH = 0;
+
+let hasListenerBeenAttached = false;
+
 
-function onResize(vpWidth, vpHeight) {
+// should only be called by *one* component once; 
+// will iterate through all subscribers
+// afterwards
+
+function onResize() {
+    let vpWidth = getVpWidth();
+    let vpHeight = getVpHeight();
     listeners.forEach(function(listener) {
         listener({ vpWidth, vpHeight });
     });
 }
 
-window.addEventListener('resize',function(){
-    vpW = getVpWidth();
-    vpH = getVpHeight();
-    onResize(vpW, vpH);
-});
+
 
 // =============== //
 //    the Hook     //
 // =============== //
 
 function useViewportSizes(debounce) {
+    useLayoutEffect(()=> {
+        if(window && !hasListenerBeenAttached) {
+            hasListenerBeenAttached = true;
+            window.addEventListener('resize', onResize);        
+            onResize();
+        }
+    }, []);
+
     const [{ vpWidth, vpHeight }, setState] = useState(() => ({ 
         vpWidth : vpW, vpHeight : vpH
     }));
@@ -75,7 +89,7 @@ function useViewportSizes(debounce) {
         return () => listeners.delete(listener);
     }, []);
 
-    return [vpWidth, vpHeight];
+    return [vpWidth, vpHeight, onResize];
 }
 
 export default useViewportSizes