usePermission

Monitor the status of browser permissions for hardware and system APIs.

Privacy API

Access Dashboard

Real-time monitoring of browser hardware and system permissions.

📷
loading

Camera

System permission for device hardware access.

🎙️
loading

Microphone

System permission for device hardware access.

📍
loading

Geolocation

System permission for device hardware access.

🔔
loading

Notifications

System permission for device hardware access.

Permissions change based on your browser settings.
Try blocking or allowing them in your site settings to see it update.

Usage

import { usePermission } from 'usehooks-ts'
 
export default function App() {
  const status = usePermission('camera')
 
  return (
    <div>
      <p>Camera permission status: {status}</p>
      {status === 'granted' && <CameraComponent />}
      {status === 'denied' && <p>Please enable camera in settings</p>}
    </div>
  )
}

API

const status = usePermission(permissionName)

Parameters

NameTypeDescription
permissionNamePermissionNameThe name of the permission to track

Return Values

NameTypeDescription
status'granted' | 'denied' | 'prompt' | 'loading'Current permission state

Hook

import { useEffect, useState } from 'react'
 
export type PermissionStatus = 'granted' | 'denied' | 'prompt' | 'loading'
 
export function usePermission(name: string): PermissionStatus {
  const [status, setStatus] = useState<PermissionStatus>('loading')
 
  useEffect(() => {
    let permissionStatus: any = null
 
    const handleChange = () => {
      setStatus(permissionStatus?.state || 'denied')
    }
 
    navigator.permissions
      ?.query({ name: name as any })
      .then((status) => {
        permissionStatus = status
        setStatus(status.state)
        status.addEventListener('change', handleChange)
      })
      .catch(() => {
        setStatus('denied')
      })
 
    return () => {
      permissionStatus?.removeEventListener('change', handleChange)
    }
  }, [name])
 
  return status
}