0.5.0-b.1; improve d.ts & bump react peerdep

closes #17

README.md

@@ -1,9 +1,8 @@
 # use-viewport-sizes #
 
-![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)
+![npm](https://img.shields.io/npm/v/use-viewport-sizes.svg?color=blue) ![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 and
-other flexible options for optimal usage.
+a tiny TS-compatible 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 ##
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-viewport-sizes",
-  "version": "0.4.0-beta.1",
+  "version": "0.5.0-beta.1",
   "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",
@@ -10,8 +10,8 @@
     "dev": "webpack-dev-server --env testServer --mode development --open",
     "prepublishOnly": "npm run build"
   },
-  "peer Dependencies": {
-    "react": "^16.8.6"
+  "peerDependencies": {
+    "react": "^16.8.6 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.4.3",

src/index.d.ts

@@ -1,18 +1,38 @@
 declare module 'use-viewport-sizes' {
-    export type VPSizesHasher = ({ vpW: number, vpH: number }) => String;
+    export type VPSizesHasher = ({ vpW, vpH }: {  vpW: number, vpH: number}) => String;
     export type VPSizesOptions ={
         debounceTimeout?: number,
         hasher?: VPSizesHasher,
-        dimension?: 'w'|'h'|'both' = 'both'
+        dimension: 'both' | undefined
     };
 
+    export type VPSizeOptions ={
+        debounceTimeout?: number,
+        hasher?: VPSizesHasher,
+        dimension?: 'w'|'h'
+    };
+
+    /**
+     * Hook which observes viewport dimensions. Returns [width, height] of
+     * current visible viewport of app, or the specific dimension
+     */
+    export default function(input:number|VPSizesOptions):([vpW: number, vpH: number, triggerResize: Function]);
+
+    /**
+     * Hook which observes viewport dimensions. Returns [width, height] of
+     * current visible viewport of app, or the specific dimension
+     */
+    export default function(input: VPSizeOptions):([dimension: number, triggerResize:Function]);
+
+    /**
+     * Hook which observes viewport dimensions. Returns [width, height] of
+     * current visible viewport of app, or the specific dimension
+     */
+    export default function(input:VPSizesHasher):([vpW: number, vpH: number, triggerResize: Function]);
+
     /**
      * Hook which observes viewport dimensions. Returns [width, height] of
      * current visible viewport of app, or the specific dimension
      */
-    export default function(
-        input:number | VPSizesHasher | VPSizesOptions
-    ):([vpW: number, vpH: number, triggerResize: Function] |
-        [dimension: number, triggerResize:Function]
-    );
-}
+    export default function():([vpW: number, vpH: number, triggerResize: Function]);
+}