platform-ts is available as a React hook called useUserAgent. The user agent is particularly helpful for hardware and operating system detection.

For example, on macOS the user-agent string has the OS version frozen at 10.15.7 regardless of the actual OS version. Instead, this information is available asynchronously via the getHighEntropyValues() API. useUserAgent will immediately return the information parsed from the user agent string, and will update asynchronously when the high entropy values are available.

Note

Since the high entropy values are only available in the current browser, you will get the most value out of this hook when using it to detect a client's browser as opposed to arbitrary user agent strings.

GOOD:

  • useUserAgent()

BAD:

  • useUserAgent(navigator.userAgent)
  • useUserAgent(myArbitraryString)

Installation

bash
npm i use-user-agent

Usage

tsx
import { useUserAgent } from "platform-ts";

function MyComponent() {
  const { browser, os } = useUserAgent();

  return (
    <p>
      You are using {browser.name} on {os.name}.
    </p>
  );
}