All hooks / Page, device, and user

usePermission

319 B minified and brotliedSourceMarkdown✓ Works in all modern browsers

The current state of a browser permission ('granted', 'denied', 'prompt'), updated when the user changes it in browser settings.

Returns 'unknown' on the server, during hydration, while the browser answers (one async query, shared by every component), and when the browser does not support querying that permission. Never triggers a permission prompt.

Import

import { usePermission } from '@vincent.ri/react-tils'
// or only this hook
import { usePermission } from '@vincent.ri/react-tils/usePermission'

Usage

const permission = usePermission('notifications')
if (permission === 'denied') return <p>Notifications are blocked in your browser settings.</p>
if (permission !== 'granted') return <button onClick={() => Notification.requestPermission()}>Enable notifications</button>

Live demo

When to use it

Deciding whether to show a "Enable notifications" or "Use my location" button, or explaining how to re-enable a denied permission.

When not to

You need to ask for the permission; call the feature's own API from a user action (e.g. Notification.requestPermission(), or useGeolocation). Treat 'unknown' as "might work": support differs a lot between browsers (e.g. Firefox and Safari don't support querying camera).

API

function usePermission(name: PermissionName | (string & {})): PermissionValue

Types

export type PermissionValue = PermissionState | "unknown";