Skip to content

Commit

Permalink
feat: usePermission
Browse files Browse the repository at this point in the history
Hook to query permission status of browser API's
  • Loading branch information
wardoost authored Jul 10, 2019
2 parents 02ed947 + e061881 commit 588a0c5
Show file tree
Hide file tree
Showing 5 changed files with 86 additions and 0 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
20 changes: 20 additions & 0 deletions docs/usePermission.md
Original file line number Diff line number Diff line change
@@ -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>
);
};
```
14 changes: 14 additions & 0 deletions src/__stories__/usePermission.story.tsx
Original file line number Diff line number Diff line change
@@ -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 />);
2 changes: 2 additions & 0 deletions src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -123,6 +124,7 @@ export {
useObservable,
useOrientation,
usePageLeave,
usePermission,
usePrevious,
usePromise,
useRaf,
Expand Down
49 changes: 49 additions & 0 deletions src/usePermission.ts
Original file line number Diff line number Diff line change
@@ -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;

0 comments on commit 588a0c5

Please sign in to comment.