uua
@oieduardorabelo/use-user-agent
npm i @oieduardorabelo/use-user-agent
uua

@oieduardorabelo/use-user-agent

⚛️ React Hooks to detect browsers user-agent using ua-parser-js as main dependency.

by Eduardo Rabelo

5.0.1 (see all)License:MITTypeScript:Built-InCategories:React User Agent Parsing
npm i @oieduardorabelo/use-user-agent
Readme

@oieduardorabelo/use-user-agent

React Hooks to detect browsers user-agent using ua-parser-js as main dependency.

To install it:

yarn add @oieduardorabelo/use-user-agent

Example

An online demo is available at CodeSandbox:

If you've any issues, open an issue with a CodeSandbox link with your issue

API Explained

In your app, you can add:

import { useUserAgent } from '@oieduardorabelo/use-user-agent';

function App() {
  let details = useUserAgent(uastring)
  ...
}

details object is composed of:

  • details: It is either null or an ua-parser-js object.
  • details.os: It is a Object, with keys name and version as string|undefined
  • details.browser: It is a Object, with keys name, version and major as string|undefined
  • details.cpu: It is a Object, with keys architecture as string|undefined
  • details.device: It is a Object, with keys vendor, model and type as string|undefined
  • details.engine: It is a Object, with keys name and version as string|undefined

For full documentation, refer to ua-parser-js repository.

uastring parameter is composed of:

  • uastring: It is a String, should be a user-agent string, if none is passed, we default to window.navigator.userAgent

Examples

Using default value from useUserAgent():

import { useUserAgent } from '@oieduardorabelo/use-user-agent';

function App() {
  let details = useUserAgent(); // default is `window.navigator.userAgent`

  if (!details) {
    return null;
  }

  let { os, browser, cpu, device, engine } = details;

  return (
    <div>
      <p>My OS is {os.name}, on version {os.version}</p>
      <p>My Browser is {browser.name}, on version {browser.version} with major {browser.major}</p>
      <p>My CPU architecture is {cpu.architecture}</p>
      <p>My Device is {device.vendor}, with model {device.model} of type {device.type}</p>
      <p>My Engine is {engine.name} with version {engine.version}</p>
    </div>
  );
}

Passing a custom user-agent string:

import { useUserAgent } from '@oieduardorabelo/use-user-agent';

function App() {
  let uastring = "Mozilla/5.0 (PlayBook; U; RIM Tablet OS 1.0.0; en-US) AppleWebKit/534.11 (KHTML, like Gecko) Version/7.1.0.7 Safari/534.11";
  let details = useUserAgent(uastring);

  if (!details) {
    return null;
  }

  let { os, browser, cpu, device, engine } = details;

  return (
    <div>
      <p>My OS is {os.name}, on version {os.version}</p>
      <p>My Browser is {browser.name}, on version {browser.version} with major {browser.major}</p>
      <p>My CPU architecture is {cpu.architecture}</p>
      <p>My Device is {device.vendor}, with model {device.model} of type {device.type}</p>
      <p>My Engine is {engine.name} with version {engine.version}</p>
    </div>
  );
}

License

MIT License © Eduardo Rabelo

Downloads/wk

2.9K

GitHub Stars

17

LAST COMMIT

1mo ago

MAINTAINERS

1

CONTRIBUTORS

1

OPEN ISSUES

0

OPEN PRs

0
VersionTagPublished
5.0.1
latest
8d ago
No tutorials found
Add a tutorial