Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/oieduardorabelo/use-user-agent
⚛️ React Hooks to detect browsers user-agent using ua-parser-js as main dependency.
https://github.com/oieduardorabelo/use-user-agent
agent browser hooks react react-hooks reactjs ua-parser-js user user-agent
Last synced: 10 days ago
JSON representation
⚛️ React Hooks to detect browsers user-agent using ua-parser-js as main dependency.
- Host: GitHub
- URL: https://github.com/oieduardorabelo/use-user-agent
- Owner: oieduardorabelo
- Created: 2019-08-14T01:50:45.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2022-06-27T03:12:06.000Z (over 2 years ago)
- Last Synced: 2024-09-23T19:47:33.863Z (about 1 month ago)
- Topics: agent, browser, hooks, react, react-hooks, reactjs, ua-parser-js, user, user-agent
- Language: TypeScript
- Homepage:
- Size: 235 KB
- Stars: 19
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @oieduardorabelo/use-user-agent
React Hooks to detect browsers user-agent using [`ua-parser-js`](https://github.com/faisalman/ua-parser-js) as main dependency.
To install it:
```
yarn add @oieduardorabelo/use-user-agent
```
## Example
An online demo is available at CodeSandbox:
- **Live demo:** https://codesandbox.io/s/live-demo-use-user-agent-d7iyg
If you've any issues, **open an issue with a CodeSandbox link** with your issue
## API Explained
In your app, you can add:
```javascript
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](https://github.com/faisalman/ua-parser-js#example).
### `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()`:
```javascript
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 (
My OS is {os.name}, on version {os.version}
My Browser is {browser.name}, on version {browser.version} with major {browser.major}
My CPU architecture is {cpu.architecture}
My Device is {device.vendor}, with model {device.model} of type {device.type}
My Engine is {engine.name} with version {engine.version}
);
}
```
Passing a custom user-agent string:
```javascript
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 (
My OS is {os.name}, on version {os.version}
My Browser is {browser.name}, on version {browser.version} with major {browser.major}
My CPU architecture is {cpu.architecture}
My Device is {device.vendor}, with model {device.model} of type {device.type}
My Engine is {engine.name} with version {engine.version}
);
}
```
### License
[MIT License](https://oss.ninja/mit/oieduardorabelo/) © [Eduardo Rabelo](https://eduardorabelo.me)