fix a few bugs discovered testing beta version, update readme and bump beta version

Author: rob2d

README.md

@@ -11,11 +11,12 @@ npm install -D use-viewport-sizes
 ```
 
 ## Benefits ##
-- extremely lightweight and dependency-free -- **3.7kb** without/before gzipping.
+- extremely lightweight and dependency-free -- **3.75kb** without/before gzipping.
 - only one `window.onresize` handler used to subscribe to any changes in an unlimited number of components as well despite several different paradigms that pull from this.
 - 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.
+- optional hash function to update component subtree only at points you would like to.
+- supports SSR (see example under Usage section).
 
 
 ## Usage ##

build/index.js

@@ -1,6 +1,6 @@
 {
   "name": "use-viewport-sizes",
-  "version": "0.2.8-beta.0",
+  "version": "0.2.8-beta.9",
   "description": "tiny React hook for tracking visible window viewport size in your components w/ an optional debounce for optimal rendering.",
   "main": "build/index.js",
   "scripts": {

package.json

@@ -1,4 +1,4 @@
-import { useState, useRef, useLayoutEffect, useCallback } from 'react';
+import { useState, useRef, useLayoutEffect, useCallback, useMemo } from 'react';
 
 function getVpWidth () {
     return (typeof window != 'undefined') ? Math.max(
@@ -53,12 +53,12 @@ function onResize() {
 
     listeners.forEach(function(listener) {
         const params = { vpW: vpWidth, vpH: vpHeight };
-        if(resolvers.has(listener)) {
+
+        if(!resolverMap.has(listener)) {
             listener(params);
         }
         else {
-            const resolverParams = resolverMap.get(listener);
-            const { hasher, prevHash } = resolverParams;
+            const { hasher, prevHash } = resolverMap.get(listener);
             const hash = hasher(params);
 
             if(hash != prevHash) {
@@ -87,17 +87,22 @@ function onResize() {
 function useViewportSizes(input) {
     const hasCustomHasher = (typeof input == 'function');
     const [state, setState] = useState(()=> !hasCustomHasher ?
-        ({ vpW: vpWidth, vpH: vpHeight }) : input({ vpWidth, vpHeight })
+        ({ vpW: vpWidth, vpH: vpHeight }) :
+        (input && input({ vpW: vpWidth, vpH:vpHeight }))
     );
     const timeout = useRef(undefined);
-    const listener = useCallback((!input || hasCustomHasher) ?
-        state => setState(state) :
-        state => {
-            if(timeout.current) { clearTimeout(timeout.current) }
-            timeout.current = setTimeout(() => setState(state), input);
+    const listener = useCallback(
+        (!input || hasCustomHasher) ?
+            state => setState(state) :
+            state => {
+                if(timeout.current) { clearTimeout(timeout.current) }
+                timeout.current = setTimeout(() => setState(state), input);
     }, [input]);
 
     useLayoutEffect(() => {
+        if(hasCustomHasher) {
+            resolverMap.set(listener, { hasher: input, prevHash: state.hash });
+        }
         listeners.add(listener);
 
         if(window && listeners.size == 1) {