usePermission

一个 React Hook,用于查询浏览器功能的权限状态。

演示

源码
isSupported:
false
Clipboard read permission state:
null
Geolocation permission state:
null

用法

请查看 API。

源码

点击下方链接跳转 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> = {
  /**
   * 暴露更多控制选项
   *
   * @defaultValue false
   */
  controls?: Controls
  /**
   * 是否立即查询
   *
   * @defaultValue true
   */
  immediate?: boolean
  /**
   * 状态变化时的回调函数
   */
  onStateChange?: (state: PermissionState) => void
}

返回值

export type UsePermissionReturns<Controls extends boolean> = Controls extends true
  ? {
      /**
       * 若权限受支持
       */
      isSupported: boolean
      /**
       * 查询权限状态
       */
      state: RefObject<PermissionState | null>
      /**
       * 查询权限状态
       */
      query(): Promise<PermissionStatus | null>
    }
  : RefObject<PermissionState | null>