https://github.com/burnpiro/use-ua-parser-js
React Hook built on top of UAParser.js library to detect Browser, Engine, OS, CPU, and Device type/model from User-Agent data
https://github.com/burnpiro/use-ua-parser-js
browser-detector device-detector react-hooks user-agent user-agent-parser
Last synced: about 1 month ago
JSON representation
React Hook built on top of UAParser.js library to detect Browser, Engine, OS, CPU, and Device type/model from User-Agent data
- Host: GitHub
- URL: https://github.com/burnpiro/use-ua-parser-js
- Owner: burnpiro
- Created: 2021-10-02T16:38:48.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-12-21T08:30:17.000Z (5 months ago)
- Last Synced: 2025-03-22T21:07:45.683Z (about 2 months ago)
- Topics: browser-detector, device-detector, react-hooks, user-agent, user-agent-parser
- Language: TypeScript
- Homepage:
- Size: 735 KB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# useUA React Hook
React Hook built on top of UAParser.js library to detect Browser, Engine, OS, CPU, and Device type/model from User-Agent data
- Hook author: Kemal Erdem https://erdem.pl
- UAParse.js author : Faisal Salman <>
- Demo : https://faisalman.github.io/ua-parser-js
- Source : https://github.com/burnpiro/use-ua-parser-js
# Installation
```bash
npm i use-ua-parser-js
```
# Usage
```javascript
import { useUA } from 'use-ua-parser-js';
const myComponent: FC = (props) => {
const UADetails = useUA(); //get current browser data
[...]
}
```
Return:
```typescript
{
ua: string,
browser: { name: string, version: string },
cpu: { architecture: string },
device: { model: string, type: string, vendor: string },
engine: { name: string, version: string },
os: { name: string, version: string }
}
```
### Options
Parse custom userAgent:
```javascript
import { useUA } from 'use-ua-parser-js';
const customAgent = 'Mozilla/5.0 (iPhone; U; CPU iPhone OS 5_1_1 like Mac OS X; en) AppleWebKit/534.46.0 (KHTML, like Gecko) CriOS/19.0.1084.60 Mobile/9B206 Safari/7534.48.3';
const myComponent: FC = (props) => {
const UADetails = useUA(customAgent);
[...]
}
```
# Other Hooks
### `useDevice(uaString?: string)`:
```javascript
import { useDevice } from 'use-ua-parser-js';
const myComponent: FC = (props) => {
const device = useDevice(); //{ model: string, type: string, vendor: string }
}
```
### `useBrowser(uaString?: string)`:
```javascript
import { useBrowser } from 'use-ua-parser-js';
const myComponent: FC = (props) => {
const browser = useBrowser(); //{ name: string, version: string }
}
```
### `useCPU(uaString?: string)`:
```javascript
import { useCPU } from 'use-ua-parser-js';
const myComponent: FC = (props) => {
const cpu = useCPU(); //{ architecture: string }
}
```
### `useEngine(uaString?: string)`:
```javascript
import { useEngine } from 'use-ua-parser-js';
const myComponent: FC = (props) => {
const engine = useEngine(); //{ name: string, version: string }
}
```
## Helpers
### `isMobile(device: UAParser.IResult['device']): boolean`
```javascript
import { useDevice, isMobile } from 'use-ua-parser-js';
const myComponent: FC = (props) => {
const device = useDevice(); //{ model: string, type: string, vendor: string }
const isCurrentDeviceMobile = isMobile(device);
}
```
### `isTouchDevice(device: UAParser.IResult['device']): boolean`
Check if device is either a `mobile`, `tablet` or `wearable` device. Doesn't include "2:1" laptops.
```javascript
import { useDevice, isTouchDevice } from 'use-ua-parser-js';
const myComponent: FC = (props) => {
const device = useDevice(); //{ model: string, type: string, vendor: string }
const hasTouchScreen = isTouchDevice(device);
}
```