Skip to content

usePermission ​

Hook that gives you the state of permission

browser
test coverage
Last changed: last month

TIP

This hook uses navigator.permissions browser api to provide enhanced functionality. Make sure to check for compatibility with different browsers when using this api

Installation ​

Library
CLI
Manual
typescript
import { usePermission } from '@siberiacancode/reactuse';

Usage ​

typescript
const { state, supported, query } = usePermission('microphone');

Demo ​

Api ​

Parameters

NameTypeDefaultNote
permissionDescriptorNameUsePermissionName-- The permission name
options.enabled?booleantrue- Whether the permission is enabled

Returns

UsePermissionReturn

Type declaration ​

typescript
export type UsePermissionName =
  | 'accelerometer'
  | 'accessibility-events'
  | 'ambient-light-sensor'
  | 'background-sync'
  | 'camera'
  | 'clipboard-read'
  | 'clipboard-write'
  | 'gyroscope'
  | 'magnetometer'
  | 'microphone'
  | 'notifications'
  | 'payment-handler'
  | 'persistent-storage'
  | 'push'
  | 'speaker'
  | PermissionName;

export interface UsePermissionOptions {
  /** Whether the permission is enabled */
  enabled: boolean;
}

export interface UsePermissionReturn {
  /** The permission state */
  state: PermissionState;
  /** The permission supported status */
  supported: boolean;
  /** The permission query function */
  query: () => Promise<PermissionState>;
}

Source ​

Source • Demo

Contributors ​

D
debabin
debabin
H
hywax
hywax

Released under the MIT License.