feat: 🎸 add useOrientation hook

Author: streamich

README.md

@@ -18,6 +18,7 @@ This is port of [`libreact`](https://github.com/streamich/libreact) to React Hoo
    - [`useLocation`](./docs/useLocation.md)
    - [`useMedia`](./docs/useMedia.md)
    - [`useMediaDevices`](./docs/useMediaDevices.md)
+   - [`useOrientation`](./docs/useOrientation.md)
    - [`useSize`](./docs/useSize.md)
    - [`useWindowSize`](./docs/useWindowSize.md)
 - Side effects

docs/useOrientation.md

@@ -0,0 +1,29 @@
+# `useOrientation`
+
+React sensor hook that tracks screen orientation of user's device.
+
+Returns state in the following shape
+
+```js
+{
+  angle: 0,
+  type: 'landscape-primary'
+}
+```
+
+
+## Usage
+
+```jsx
+import {useOrientation} from 'react-use';
+
+const Demo = () => {
+  const state = useOrientation();
+
+  return (
+    <pre>
+      {JSON.stringify(state, null, 2)}
+    </pre>
+  );
+};
+```

src/__stories__/useOrientation.story.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import {storiesOf} from '@storybook/react';
+import {useOrientation} from '..';
+
+const Demo = () => {
+  const state = useOrientation();
+
+  return (
+    <pre>
+      {JSON.stringify(state, null, 2)}
+    </pre>
+  );
+};
+
+storiesOf('useOrientation', module)
+  .add('Example', () =>
+    <Demo/>
+  )

src/index.ts

@@ -7,6 +7,7 @@ import useLocation from './useLocation';
 import useMap from './useMap';
 import useMedia from './useMedia';
 import useMediaDevices from './useMediaDevices';
+import useOrientation from './useOrientation';
 import useSize from './useSize';
 import useTitle from './useTitle';
 import useToggle from './useToggle';
@@ -22,6 +23,7 @@ export {
   useMap,
   useMedia,
   useMediaDevices,
+  useOrientation,
   useSize,
   useTitle,
   useToggle,

src/useOrientation.ts

@@ -0,0 +1,45 @@
+import {useState, useEffect} from './react';
+import {on, off} from './util';
+
+export interface State {
+  angle: number;
+  type: string;
+}
+
+const defaultState: State = {
+  angle: 0,
+  type: 'landscape-primary'
+};
+
+const useOrientation = (initialState: State = defaultState) => {
+  const [state, setState] = useState(initialState);
+
+  useEffect(() => {
+    let mounted = true;
+
+    const onChange = () => {
+      if (mounted) {
+        const {orientation} = screen as any;
+        
+        if (!orientation) {
+          setState(initialState);
+        }
+        
+        const {angle, type} = orientation;
+        setState({angle, type});
+      }
+    };
+
+    on(window, 'orientationchange', onChange);
+    onChange();
+
+    return () => {
+      mounted = false;
+      off(window, 'orientationchange', onChange);
+    };
+  }, [0]);
+
+  return state;
+};
+
+export default useOrientation;