Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/wojtekmaj/react-hooks. A collection of React Hooks.
hooks react react-hooks
Something went wrong. Try again.
1.6 kB · 58 lines
TypeScript
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859import { useEffect, useState } from 'react';
const isBrowser = typeof window !== 'undefined';
/** * Returns permission state given permission name. * * @param {PermissionDescriptor} options Options * @param {PermissionDescriptor.name} options.name Permission name * @returns {string | null} Permission state ("granted", "denied", "prompt") */export default function usePermissionState({ name }: PermissionDescriptor): PermissionState | null { const [state, setState] = useState<PermissionState | null>(() => { const areNavigatorPermissionsSupported = isBrowser && 'permissions' in navigator;
if (!areNavigatorPermissionsSupported) { return null; }
if (name === 'notifications' && 'Notification' in window) { const potentialState = Notification.permission;
return potentialState === 'default' ? 'prompt' : potentialState; }
return null; });
useEffect(() => { const areNavigatorPermissionsSupported = isBrowser && 'permissions' in navigator;
if (!areNavigatorPermissionsSupported) { return; }
let permissionStatus: PermissionStatus;
function onPermissionStatusChange() { setState(permissionStatus.state); }
navigator.permissions.query({ name }).then((result) => { permissionStatus = result;
setState(permissionStatus.state);
permissionStatus.addEventListener('change', onPermissionStatusChange); });
return () => { if (permissionStatus) { permissionStatus.removeEventListener('change', onPermissionStatusChange); } }; }, [name]);
return state;}