usePermission

Hook to query the status of API permissions attributed to the current context.

See: PermissionAPI.

Demo

INFO

The component uses usePermission hook to check permission status of accelerometer, camera, microphone, notifications ans speaker.

Loading demo…

Show source code

import { usePermission } from "../../../.."

export const UsePermission = () => {
	const [accelerometer] = usePermission("accelerometer");
	const [camera] = usePermission("camera");
	const [microphone] = usePermission("microphone");
	const [notifications] = usePermission("notifications");
	const [speaker] = usePermission("speaker-selection");

	return <div>
		<p>accelerometer: {accelerometer}</p>
		<p>camera: {camera}</p>
		<p>microphone: {microphone}</p>
		<p>notifications: {notifications}</p>
		<p>speaker: {speaker}</p>
	</div>
}

Types

PermissionNamePolyfill

Extended set of permission names beyond the standard PermissionName type. Includes vendor-specific and draft API permissions supported by various browsers.

export type PermissionNamePolyfill =
	| "midi"
	| "ambient-light-sensor"
	| "accessibility-events"
	| "clipboard-read"
	| "clipboard-write"
	| "payment-handler"
	| "idle-detection"
	| "periodic-background-sync"
	| "system-wake-lock"
	| "window-management"
	| "window-placement"
	| "local-fonts"
	| "top-level-storage-access"
	| "captured-surface-control"
	| "persistent-storage"
	| "storage-access"
	| "accelerometer"
	| "background-fetch"
	| "bluetooth"
	| "camera"
	| "display-capture"
	| "geolocation"
	| "gyroscope"
	| "magnetometer"
	| "microphone"
	| "nfc"
	| "notifications"
	| "push"
	| "screen-wake-lock"
	| "speaker-selection";

TPermissionName

Union of the standard PermissionName and the extended PermissionNamePolyfill. Used by usePermission.

export type TPermissionName = PermissionName | PermissionNamePolyfill;

TPermissionState

Possible permission states returned by usePermission. Extends the standard PermissionState with:

• "not supported" — the Permissions API or the specific permission name is not available.
• "asking" — a permission request is currently in progress.

export type TPermissionState = PermissionState | "not supported" | "asking";

UsePermissionResult

Result tuple returned by usePermission.

Index	Type	Description
[0]	TPermissionState	current permission state ("granted", "denied", "prompt", "not supported", "asking").
[1]	() => Promise<TPermissionState>	requestPermission() — triggers a permission request and returns the resulting state.