Skip to main content

usePermission()

The usePermission() check browser permissions for querying state for various browser APIs

Import​

import { usePermission } from 'react-haiku';

Usage​

Permission state: checking

{}
import { useState } from 'react';
import { usePermission } from 'react-haiku';

export const Component = () => {
  const state = usePermission("geolocation")
  const [location, setLocation] = useState<GeolocationPosition | null>(null)

  function handleGetCurrentPosition() {
    if (state !== "prompt" && state !== "granted") return

    navigator.geolocation.getCurrentPosition((location) => {
      setLocation(location)
    })
  }

  return (
    <div>
      <h3>Permission state: {state}</h3>

      <pre>
        {JSON.stringify(location ?? {}, null, 2)}
      </pre>

      <div>
        <button onClick={handleGetCurrentPosition}>
          Get current position
        </button>
      </div>
    </div>
  );
}

API​

Arguments​

  • permission - The name of the API whose permissions you want to query, such as the PermissionName and other described in the MDN documentation.

Returns​

The the state of a requested permission, combining the standard PermissionState with additional internal states.

  • checking: The permission state is being verified.
  • not-supported: The permission check is not supported or an error occurred during verification.