useSuspenseNavigatorUserAgentData

About

⚠️ Experimental Hook: This hook may be removed or significantly changed in any release without notice.

A Suspense-enabled hook for getting high entropy values from the Navigator User Agent Data API. This hook suspends while the API is fetching data and must be wrapped in a Suspense boundary. It provides access to detailed browser and platform information that requires user permission.

Examples

Basic Usage with All Hints

import React, { Suspense } from "react";
import { useSuspenseNavigatorUserAgentData } from "rooks/experimental";

function UserAgentInfo() {
  const userAgentData = useSuspenseNavigatorUserAgentData();

  return (
    <div>
      <h2>User Agent Information</h2>
      <p>Architecture: {userAgentData.architecture}</p>
      <p>Platform Version: {userAgentData.platformVersion}</p>
      <p>Bitness: {userAgentData.bitness}</p>
      <p>WoW64: {userAgentData.wow64 ? "Yes" : "No"}</p>
      {userAgentData.fullVersionList && (
        <div>
          <h3>Browser Versions:</h3>
          {userAgentData.fullVersionList.map((item, index) => (
            <p key={index}>
              {item.brand}: {item.version}
            </p>
          ))}
        </div>
      )}
    </div>
  );
}

export default function App() {
  return (
    <Suspense fallback={<div>Loading user agent data...</div>}>
      <UserAgentInfo />
    </Suspense>
  );
}

Requesting Specific Hints

import React, { Suspense } from "react";
import { useSuspenseNavigatorUserAgentData } from "rooks/experimental";

function PlatformInfo() {
  const userAgentData = useSuspenseNavigatorUserAgentData([
    "architecture",
    "platformVersion",
  ]);

  return (
    <div>
      <h2>Platform Information</h2>
      <p>Architecture: {userAgentData.architecture}</p>
      <p>Platform Version: {userAgentData.platformVersion}</p>
    </div>
  );
}

export default function App() {
  return (
    <Suspense fallback={<div>Loading platform info...</div>}>
      <PlatformInfo />
    </Suspense>
  );
}

With Error Boundary

import React, { Suspense } from "react";
import { ErrorBoundary } from "react-error-boundary";
import { useSuspenseNavigatorUserAgentData } from "rooks/experimental";

function DeviceInfo() {
  const userAgentData = useSuspenseNavigatorUserAgentData(["model", "formFactors"]);

  return (
    <div>
      <h2>Device Information</h2>
      <p>Model: {userAgentData.model || "Not available"}</p>
      <p>Form Factors: {userAgentData.formFactors?.join(", ") || "Not available"}</p>
    </div>
  );
}

function ErrorFallback({ error }) {
  return (
    <div>
      <h2>Error</h2>
      <p>Failed to load user agent data: {error.message}</p>
      <p>This API is only available in Chromium-based browsers.</p>
    </div>
  );
}

export default function App() {
  return (
    <ErrorBoundary FallbackComponent={ErrorFallback}>
      <Suspense fallback={<div>Loading device info...</div>}>
        <DeviceInfo />
      </Suspense>
    </ErrorBoundary>
  );
}

Arguments

Argument	Type	Description	Default
hints	string[]	Array of high entropy hints to request. See available hints below.	All hints

Available High Entropy Hints

Hint	Type	Description
architecture	string	The underlying platform architecture (e.g., "x64", "arm")
bitness	string	The architecture bitness (e.g., "32", "64")
formFactors	string[]	The form factors of the device (e.g., ["Desktop"], ["Mobile", "Tablet"])
fullVersionList	object[]	Array of browser brands and their full versions
model	string	The device model name (mainly for mobile devices)
platformVersion	string	The platform version (e.g., "10.0" for Windows)
uaFullVersion	string	Full browser version (deprecated, use fullVersionList instead)
wow64	boolean	Whether the browser is running in 32-bit mode on 64-bit Windows

Returns

Returns an object containing the requested high entropy values.

Return Value Properties

The returned object may contain any of the following properties based on the hints requested:

Property	Type	Description
architecture	string	The underlying platform architecture
bitness	string	The architecture bitness
formFactors	string[]	Array of device form factors
fullVersionList	object[]	Array of objects with `brand` and `version` properties
model	string	The device model name
platformVersion	string	The platform version
uaFullVersion	string	Full browser version (deprecated)
wow64	boolean	Whether running in WoW64 mode

Browser Support

This hook uses the Navigator User Agent Data API, which is currently only supported in:

Chrome 90+
Edge 90+
Opera 76+

The hook will throw an error in unsupported browsers.

Important Notes

Experimental Status: This hook is experimental and may change or be removed in future versions
Privacy: High entropy values may require user permission and can be used for fingerprinting
Suspense Required: This hook must be wrapped in a React Suspense boundary
Error Boundaries: Consider using error boundaries to handle unsupported browsers
Caching: Results are cached to prevent duplicate API calls with the same hints

useSuspenseNavigatorUserAgentData

On this page