add useMobileOrientation hook

Author: ShaMan123

index.d.ts

@@ -84,6 +84,8 @@ declare namespace ReactDeviceDetect {
 
   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> {
   }
 

src/components/helpers/useOrientationChange.js

@@ -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 };