v0.1.9; saved .15kb for pettiness 🙂

Author: rob2d

README.md

@@ -9,7 +9,7 @@ npm install -D use-viewport-sizes
 ```
 
 ## Benefits
-- extremely lightweight and dependency-free; **2.8kb pre-gzipped** with all dependencies.
+- extremely lightweight and dependency-free; **2.54kb 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.

build/index.js

@@ -1,6 +1,6 @@
 {
   "name": "use-viewport-sizes",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "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

@@ -1,40 +1,57 @@
 import { useState, useEffect, useMemo } from "react"
 
-const getVpWidth = () =>
-    Math.max(
-      window.document.documentElement.clientWidth, 
-      window.innerWidth || 0
-    );
+// Note: not using pure ES6/7 as babel
+// transpilation eats into precious
+// bytes and we're being petty here 🙂
+
+var { documentElement } = window.document;
+
+function getVpWidth () {
+    return Math.max(
+        documentElement.clientWidth, 
+        window.innerWidth || 0
+      );
+}
+    
 
-const getVpHeight = () =>
-    Math.max(
-        window.document.documentElement.clientHeight,
+function getVpHeight () {
+    return Math.max(
+        documentElement.clientHeight,
         window.innerHeight || 0
     );
+}
 
-const store = {
-  listeners: new Set(),
-  state: { vpWidth: getVpWidth(), vpHeight: getVpHeight() },
-  onResize(vpWidth, vpHeight) {
-    this.state = { vpWidth, vpHeight };
-    
-    for(let listener of this.listeners) {
+// =============== //
+//  Shared State   //
+// =============== //
+
+var listeners = new Set();
+var vpW = getVpWidth();
+var vpH = getVpHeight();
+
+function onResize(vpWidth, vpHeight) {
+    listeners.forEach(function(listener) {
         listener({ vpWidth, vpHeight });
-    }
-  }
-};
+    });
+}
 
-window.addEventListener("resize", () => {
-  store.onResize(getVpWidth(), getVpHeight());
+window.addEventListener('resize',function(){
+    vpW = getVpWidth();
+    vpH = getVpHeight();
+    onResize(vpW, vpH);
 });
 
+// =============== //
+//    the Hook     //
+// =============== //
+
 function useViewportSizes(debounce) {
     const [{ vpWidth, vpHeight }, setState] = useState(() => ({ 
-        ...store.state
+        vpWidth : vpW, vpHeight : vpH
     }));
 
     const listener = useMemo(()=> {
-        store.listeners.delete(listener);
+        listeners.delete(listener);
 
         let interval = undefined;
 
@@ -52,7 +69,6 @@ function useViewportSizes(debounce) {
     }, [debounce, setState]);
 
     useEffect(() => {
-        const { listeners } = store;
         listeners.add(listener);
         return () => listeners.delete(listener);
     }, []);