usePermission

A React Hook that helps to query the permission status of a browser feature.

Demo

Source
isSupported:
false
Clipboard read permission state:
null
Geolocation permission state:
null

Usage

See API for more details.

Source

Click links below to view source on GitHub.

API

const state = usePermission(permissionDesc, options) const { state, isSupported, query } = usePermission(permissionDesc, { controls: true, ...otherOptions })

PermissionDesc

type DescriptorNamePolyfill = | 'accelerometer' | 'accessibility-events' | 'ambient-light-sensor' | 'background-sync' | 'camera' | 'clipboard-read' | 'clipboard-write' | 'gyroscope' | 'magnetometer' | 'microphone' | 'notifications' | 'payment-handler' | 'persistent-storage' | 'push' | 'speaker' export type GeneralPermissionDescriptor = PermissionDescriptor | { name: DescriptorNamePolyfill } export type PermissionDesc = GeneralPermissionDescriptor | GeneralPermissionDescriptor['name'] | false

Options

export type UsePermissionOptions<Controls extends boolean> = { /** * Expose more controls * * @defaultValue false */ controls?: Controls /** * Whether to query immediately * * @defaultValue true */ immediate?: boolean /** * */ onStateChange?: (state: PermissionState) => void }

Returns

export type UsePermissionReturns<Controls extends boolean> = Controls extends true ? { /** * If the permission is supported */ isSupported: boolean /** * Query the permission status */ state: RefObject<PermissionState | null> /** * Query the permission status */ query(): Promise<PermissionStatus | null> } : RefObject<PermissionState | null>