feat: usePermission

Hook to query permission status of browser API's

README.md

@@ -97,6 +97,7 @@
   - [`useSessionStorage`](./docs/useSessionStorage.md) — manages a value in `sessionStorage`.
   - [`useThrottle` and `useThrottleFn`](./docs/useThrottle.md) — throttles a function. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/side-effects-usethrottle--demo)
   - [`useTitle`](./docs/useTitle.md) — sets title of the page.
+  - [`usePermission`](./docs/usePermission.md) — query permission from the user depends on the specific API.
     <br/>
     <br/>
 - [**Lifecycles**](./docs/Lifecycles.md)

docs/usePermission.md

@@ -0,0 +1,20 @@
+# `usePermission`
+
+React side-effect hook that query permission status from the user depends on the specific API.
+
+
+## Usage
+
+```jsx
+import {usePermission} from 'react-use';
+
+const Demo = () => {
+  const state = usePermission({ name: 'microphone' });
+
+  return (
+    <pre>
+      {JSON.stringify(state, null, 2)}
+    </pre>
+  );
+};
+```

src/__stories__/usePermission.story.tsx

@@ -0,0 +1,14 @@
+import { storiesOf } from '@storybook/react';
+import * as React from 'react';
+import { usePermission } from '..';
+import ShowDocs from './util/ShowDocs';
+
+const Demo = () => {
+  const state = usePermission({ name: 'microphone' });
+
+  return <pre>{JSON.stringify(state, null, 2)}</pre>;
+};
+
+storiesOf('Side effects|usePermission', module)
+  .add('Docs', () => <ShowDocs md={require('../../docs/usePermission.md')} />)
+  .add('Demo', () => <Demo />);

src/index.ts

@@ -47,6 +47,7 @@ import useNumber from './useNumber';
 import useObservable from './useObservable';
 import useOrientation from './useOrientation';
 import usePageLeave from './usePageLeave';
+import usePermission from './usePermission';
 import usePrevious from './usePrevious';
 import usePromise from './usePromise';
 import useRaf from './useRaf';
@@ -123,6 +124,7 @@ export {
   useObservable,
   useOrientation,
   usePageLeave,
+  usePermission,
   usePrevious,
   usePromise,
   useRaf,

src/usePermission.ts

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react';
+import { off, on } from './util';
+
+type PermissionDesc =
+  | PermissionDescriptor
+  | DevicePermissionDescriptor
+  | MidiPermissionDescriptor
+  | PushPermissionDescriptor;
+
+type State = PermissionState | '';
+
+const noop = () => {};
+
+const usePermission = (permissionDesc: PermissionDesc): State => {
+  let mounted = true;
+  let permissionStatus: PermissionStatus | null = null;
+
+  const [state, setState] = useState<State>('');
+
+  const onChange = () => {
+    if (mounted && permissionStatus) {
+      setState(permissionStatus.state);
+    }
+  };
+
+  const changeState = () => {
+    onChange();
+    on(permissionStatus, 'change', onChange);
+  };
+
+  useEffect(() => {
+    navigator.permissions
+      .query(permissionDesc)
+      .then(status => {
+        permissionStatus = status;
+        changeState();
+      })
+      .catch(noop);
+
+    return () => {
+      mounted = false;
+      permissionStatus && off(permissionStatus, 'change', onChange);
+    };
+  }, []);
+
+  return state;
+};
+
+export default usePermission;