@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 eithernullor an ua-parser-js object. -
details.os: It is aObject, with keysnameandversionasstring|undefined -
details.browser: It is aObject, with keysname,versionandmajorasstring|undefined -
details.cpu: It is aObject, with keysarchitectureasstring|undefined -
details.device: It is aObject, with keysvendor,modelandtypeasstring|undefined -
details.engine: It is aObject, with keysnameandversionasstring|undefined
For full documentation, refer to ua-parser-js repository.
uastring parameter is composed of:
-
uastring: It is aString, should be a user-agent string, if none is passed, we default towindow.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>
);
}