Merge pull request #120 from ShaMan123/master

fix withOrientationChange typing + expose useMobileOrientation hook

Author: duskload

index.d.ts

@@ -80,9 +80,11 @@ declare namespace ReactDeviceDetect {
     condition?: boolean;
   }
 
-  export function deviceDetect (): any;
+  export function deviceDetect(): any;
 
-  export function withOrientationChange (Component: any): any;
+  export function withOrientationChange<P, S = {}>(Component: React.Component<P, S> | React.FC<P>): React.ComponentClass<P, S>;
+
+  export function useMobileOrientation(): { isPortrait: boolean, isLandscape: boolean, orientation: 'portrait' | 'landscape' };
 
   export class BrowserView extends React.Component<ViewProps> {
   }

package-lock.json

@@ -50,6 +50,7 @@
   "devDependencies": {
     "@babel/preset-env": "^7.5.5",
     "@babel/preset-react": "^7.0.0",
+    "@types/react": "^17.0.0",
     "enzyme": "^3.1.0",
     "enzyme-adapter-react-16": "^1.0.1",
     "jest": "^24.8.0",

package.json

@@ -0,0 +1,36 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { isMobile } from "./selectors";
+
+export function useMobileOrientation() {
+  const [state, setState] = useState(() => {
+    const orientation = window.innerWidth > window.innerHeight ? 90 : 0;
+    return {
+      isPortrait: orientation === 0,
+      isLandscape: orientation === 90,
+      orientation: orientation === 0 ? 'portrait' : 'landscape'
+    }
+  });
+  const handleOrientationChange = useCallback(() => {
+    const orientation = window.innerWidth > window.innerHeight ? 90 : 0;
+    const next = {
+      isPortrait: orientation === 0,
+      isLandscape: orientation === 90,
+      orientation: orientation === 0 ? 'portrait' : 'landscape'
+    }
+    state.orientation !== next.orientation && setState(next);
+  }, [state.orientation]);
+  useEffect(() => {
+    if (typeof window !== undefined && isMobile) {
+      handleOrientationChange();
+      window.addEventListener("load", handleOrientationChange, false);
+      window.addEventListener("resize", handleOrientationChange, false);
+    }
+    return () => {
+      window.removeEventListener("resize", handleOrientationChange, false);
+      window.removeEventListener("load", handleOrientationChange, false);
+    }
+  }, [handleOrientationChange]);
+  return state;
+}
+
+export { useMobileOrientation };