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> /** * 查询权限状态 */ query(): Promise<PermissionStatus | null> } : RefObject<PermissionState>