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 <f@faisalman.com>
- Demo : https://faisalman.github.io/ua-parser-js
- Source : https://github.com/burnpiro/use-ua-parser-js
npm i use-ua-parser-jsimport { 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 } }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); [...] }import { useDevice } from 'use-ua-parser-js'; const myComponent: FC<Props> = (props) => { const device = useDevice(); //{ model: string, type: string, vendor: string } }import { useBrowser } from 'use-ua-parser-js'; const myComponent: FC<Props> = (props) => { const browser = useBrowser(); //{ name: string, version: string } }import { useCPU } from 'use-ua-parser-js'; const myComponent: FC<Props> = (props) => { const cpu = useCPU(); //{ architecture: string } }import { useEngine } from 'use-ua-parser-js'; const myComponent: FC<Props> = (props) => { const engine = useEngine(); //{ name: string, version: string } }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); }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); }