@react-hookz/web/esm/usePermission/usePermission.js

React hooks done right, for browser and SSR.

import { useEffect } from 'react';
import { useSafeState } from '..';
import { off, on } from "../util/misc.js";
/**
 * Tracks a permission state.
 *
 * @param descriptor Permission request descriptor that passed to `navigator.permissions.query`
 */
export function usePermission(descriptor) {
    var _a = useSafeState('not-requested'), state = _a[0], setState = _a[1];
    useEffect(function () {
        var unmount = { current: null };
        setState('requested');
        // eslint-disable-next-line @typescript-eslint/no-floating-promises,promise/catch-or-return
        navigator.permissions
            .query(descriptor)
            // eslint-disable-next-line promise/always-return
            .then(function (status) {
            var handleChange = function () {
                setState(status.state);
            };
            setState(status.state);
            on(status, 'change', handleChange, { passive: true });
            unmount.current = function () {
                off(status, 'change', handleChange);
            };
        });
        return function () {
            if (unmount.current) {
                unmount.current();
            }
        };
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [descriptor.name]);
    return state;
}