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>