Skip to content

React Hook built on top of UAParser.js library to detect Browser, Engine, OS, CPU, and Device type/model from User-Agent data

Notifications You must be signed in to change notification settings

burnpiro/use-ua-parser-js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Installation

npm i use-ua-parser-js

Usage

import { useUA } from 'use-ua-parser-js';

const myComponent: FC<Props> = (props) => {
  const UADetails = useUA(); //get current browser data
  [...]
}

Return:

{
  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:

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> = (props) => {
  const UADetails = useUA(customAgent);
  [...]
}

Other Hooks

useDevice(uaString?: string):

import { useDevice } from 'use-ua-parser-js';

const myComponent: FC<Props> = (props) => {
  const device = useDevice(); //{ model: string, type: string, vendor: string }
}

useBrowser(uaString?: string):

import { useBrowser } from 'use-ua-parser-js';

const myComponent: FC<Props> = (props) => {
  const browser = useBrowser(); //{ name: string, version: string }
}

useCPU(uaString?: string):

import { useCPU } from 'use-ua-parser-js';

const myComponent: FC<Props> = (props) => {
  const cpu = useCPU(); //{ architecture: string }
}

useEngine(uaString?: string):

import { useEngine } from 'use-ua-parser-js';

const myComponent: FC<Props> = (props) => {
  const engine = useEngine(); //{ name: string, version: string }
}

Helpers

isMobile(device: UAParser.IResult['device']): boolean

import { useDevice, isMobile } from 'use-ua-parser-js';

const myComponent: FC<Props> = (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.

import { useDevice, isTouchDevice } from 'use-ua-parser-js';

const myComponent: FC<Props> = (props) => {
  const device = useDevice(); //{ model: string, type: string, vendor: string }
  const hasTouchScreen = isTouchDevice(device);
}

About

React Hook built on top of UAParser.js library to detect Browser, Engine, OS, CPU, and Device type/model from User-Agent data

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published