v0.1.7; initial push to git

Author: rob2d

.babelrc

@@ -0,0 +1,6 @@
+{
+    "presets": [
+        "@babel/preset-env",
+        "@babel/preset-react"
+    ]
+}

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -0,0 +1,45 @@
+# use-viewport-sizes #
+
+A tiny React hook which allows you to track visible window/document area in your components w/ an optional debounce for updates to give the most optimal experience for components with expensive renders.
+
+## Installation ##
+
+```
+npm install -D use-viewport-sizes
+```
+
+## Benefits
+- extremely lightweight and dependency-free; **2.8kb 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; the results are pooled from only one result.
+
+## Usage ##
+
+### See it in Action ###
+For an illustration of the concept, check out a CodeSandox:
+[https://codesandbox.io/s/j3vzpqxwww](https://codesandbox.io/s/j3vzpqxwww)
+
+### Without Debouncing 
+*(e.g. register every resize event immediately)*
+
+```
+import useViewportSizes from 'use-viewport-sizes'
+
+function MyComponent () {
+    const [vpWidth, vpHeight] = useViewportSizes();
+}
+```
+
+
+### With Debouncing  
+*for expensive components such as data grids which may be too
+expensive to re-render during window resize dragging.*
+```
+import useViewportSizes from 'use-viewport-sizes'
+
+function MyExpensiveComponent () {
+    const [vpWidth, vpHeight] = useViewportSizes(1000); // 1s debounce
+}
+```
+

build/index.js

@@ -0,0 +1,42 @@
+{
+  "name": "use-viewport-sizes",
+  "version": "0.1.7",
+  "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": {
+    "start": "webpack --watch",
+    "build": "webpack",
+    "dev": "webpack-dev-server --env testServer --mode development --open"
+  },
+  "dependencies": {
+    "react": "^16.8.6",
+    "webpack": "^4.30.0"
+  },
+  "peerDependencies": {
+    "react": "^16.8.6"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.4.3",
+    "@babel/core": "^7.4.3",
+    "@babel/preset-env": "^7.4.3",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.5",
+    "webpack-cli": "^3.3.0"
+  },
+  "keywords": [
+    "react",
+    "hooks",
+    "window",
+    "resize",
+    "viewport",
+    "sizes",
+    "dimensions"
+  ],
+  "author": "Robert Concepcion III",
+  "repository": "github:rob2d/use-viewport-sizes",
+  "license": "MIT",
+    "files": [
+    "build/",
+	"README.md"
+  ]
+}

package.json

@@ -0,0 +1,63 @@
+import { useState, useEffect, useMemo } from "react"
+
+const getVpWidth = () =>
+    Math.max(
+      window.document.documentElement.clientWidth, 
+      window.innerWidth || 0
+    );
+
+const getVpHeight = () =>
+    Math.max(
+        window.document.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) {
+        listener({ vpWidth, vpHeight });
+    }
+  }
+};
+
+window.addEventListener("resize", () => {
+  store.onResize(getVpWidth(), getVpHeight());
+});
+
+function useViewportSizes(debounce) {
+    const [{ vpWidth, vpHeight }, setState] = useState(() => ({ 
+        ...store.state
+    }));
+
+    const listener = useMemo(()=> {
+        store.listeners.delete(listener);
+
+        let interval = undefined;
+
+        return !debounce ?
+            state => setState({ ...state }) : 
+            state => {
+                if(interval) {
+                    clearTimeout(interval);
+                }
+                interval = setTimeout(()=> 
+                    setState({ ...state }), 
+                    debounce
+                );
+            };
+    }, [debounce, setState]);
+
+    useEffect(() => {
+        const { listeners } = store;
+        listeners.add(listener);
+        return () => listeners.delete(listener);
+    }, []);
+
+    return [vpWidth, vpHeight];
+}
+
+export default useViewportSizes

src/index.js

@@ -0,0 +1,25 @@
+const path = require('path');
+
+module.exports = {
+  entry: './src/index.js',
+  output: {
+    path: path.resolve(__dirname, 'build'),
+    filename: 'index.js',
+    libraryTarget: 'commonjs2'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        include: path.resolve(__dirname, 'src'),
+        exclude: /(node_modules|bower_components|build)/,
+        use: {
+          loader: 'babel-loader'
+        }
+      }
+    ]
+  },
+  externals: {
+    'react': 'commonjs react' 
+  }
+};