update build, code sandbox link, v0.3.0-beta.0

Author: rob2d

README.md

@@ -2,7 +2,8 @@
 
 ![npm](https://img.shields.io/npm/v/use-viewport-sizes.svg?color=blue) ![David](https://img.shields.io/david/rob2d/use-viewport-sizes.svg) ![npm](https://img.shields.io/npm/dw/use-viewport-sizes.svg?color=red) ![GitHub issues](https://img.shields.io/github/issues-raw/rob2d/use-viewport-sizes.svg) ![NPM](https://img.shields.io/npm/l/use-viewport-sizes.svg)
 
-a tiny React hook which allows you to track visible window viewport size in your components w/ an optional debounce or custom memo function for updates for optimal rendering.
+a tiny React hook which allows you to track visible window viewport size in your components w/ an optional debounce and
+other flexible options for optimal usage.
 
 ## Installation ##
 
@@ -27,7 +28,7 @@ npm install -D use-viewport-sizes
 <img src="./doc/use-viewport-sizes.gif" />
 
 *Interact with the example shown on CodeSandox* @
-[https://codesandbox.io/s/react-hooks-viewport-sizes-demo-forked-7rr9c](https://codesandbox.io/s/react-hooks-viewport-sizes-demo-forked-7rr9c)
+[https://codesandbox.io/s/react-hooks-viewport-sizes-demo-forked-7rr9c](https://codesandbox.io/s/react-hooks-viewport-sizes-demo-forked-i8urr?file=/src/index.js&resolutionWidth=1401&resolutionHeight=891)
 
 </center>
 

build/index.d.ts

@@ -1,19 +1,18 @@
 declare module 'use-viewport-sizes' {
+    export type VPSizesHasher = ({ vpW: number, vpH: number }) => String;
+    export type VPSizesOptions ={
+        debounceTimeout?: number,
+        hasher?: VPSizesHasher,
+        dimension?: 'w'|'h'|'both' = 'both'
+    };
+
     /**
      * Hook which observes viewport dimensions. Returns [width, height] of
-     * current visible viewport of app.
-     *
-     * If no input specified, returns the [width, height] when the window changes.
-     *
-     * If input is specified as a number, it interprets this as the number of
-     * miliseconds to debounce before updates.
-     *
-     * If the input is specified as a function, it accepts a callback
-     * with the viewport width and height passed in the first arg as
-     * { vpW, vpH }, and will only return a new value and update when
-     * the hash-value returned changes.
+     * current visible viewport of app, or the specific dimension
      */
     export default function(
-        input:number | (({ vpW: number, vpH: number }) => String)
-    ):[vpW: number, vpH: number];
+        input:number | VPSizesHasher | VPSizesOptions
+    ):([vpW: number, vpH: number, triggerResize: Function] |
+        [dimension: number, triggerResize:Function]
+    );
 }

build/index.js

@@ -1,15 +1,16 @@
 {
   "name": "use-viewport-sizes",
-  "version": "0.2.12",
+  "version": "0.3.0-beta.0",
   "description": "a tiny React hook which allows you to track visible window viewport size in your components w/ an optional debounce or custom memo function for updates for optimal rendering.",
   "main": "./build/index.js",
   "types": "./build/index.d.ts",
   "scripts": {
     "start": "webpack --watch",
     "build": "webpack",
-    "dev": "webpack-dev-server --env testServer --mode development --open"
+    "dev": "webpack-dev-server --env testServer --mode development --open",
+    "prepublishOnly": "npm run build"
   },
-  "peerDependencies": {
+  "peer Dependencies": {
     "react": "^16.8.6"
   },
   "devDependencies": {

package.json

@@ -105,8 +105,6 @@ function useViewportSizes(input) {
         input?.debounceTimeout
     ) || 0;
 
-    const throttleTimeout = input?.throttleTimeout || 0;
-
     const dimension = input?.dimension || 'both';
 
     const options = {