Installation

pnpm dlx uselab@latest add use-permission

Usage

import { usePermission } from "@/hooks/use-permission"
 
export function PermissionGate() {
  const { state, refresh } = usePermission("notifications")
 
  return (
    <div className="space-y-2">
      <p>Notifications: {state || "unknown"}</p>
      <button onClick={() => void refresh()}>Refresh</button>
    </div>
  )
}

API Reference

usePermission(name)

Parameters

Return value

The hook returns an object { isSupported, state, error, refresh }:

Notes

• This hook is useful for notifications, geolocation, camera, microphone, and clipboard-capable flows.
• Browser support and permission names vary, so keep feature-specific fallbacks.
• Use it to explain blocked features before prompting the user to take action.