usePermission

瀏覽器權限查詢

usePermission 使用 Permissions API 查詢特定瀏覽器功能的權限狀態（如 "clipboard-read"、"geolocation"、"notifications" 等）。它回傳一個字串，值為 "granted"、"denied"、"prompt" 或空字串，並且在使用者更改權限時即時更新。

使用場景

• 在請求存取之前檢查功能權限狀態以提供適當的 UI
• 根據權限狀態有條件地顯示或停用功能
• 監控權限變更以在使用者撤銷存取時做出反應

注意事項

• SSR 安全：在伺服器端渲染時回傳空字串（""）。伺服器上不會存取 navigator.permissions。
• 響應式：此 hook 訂閱權限的 change 事件，因此如果使用者透過瀏覽器設定撤銷或授予權限，回傳的狀態會即時更新。
• 相關 hooks：常與 useClipboard、useGeolocation、useMediaDevices 和 useWebNotification 一起使用，以在使用前檢查各自的權限。

Usage

function Demo() {
  const state = usePermission({ name: "microphone" });

  return <pre>{JSON.stringify(state, null, 2)}</pre>;
};

API

usePermission

Returns

UsePermissionState: 權限狀態

Arguments

UsePermissionState

Type

export type UsePermissionState = PermissionState | ''

UsePermissionGeneralPermissionDescriptor

Type

export type UsePermissionGeneralPermissionDescriptor = | PermissionDescriptor | { name: UsePermissionDescriptorNamePolyfill }

UsePermissionDescriptorNamePolyfill

Type

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