use-ua-parser-js
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.3 • Public • Published

    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);
    }

    Install

    npm i use-ua-parser-js

    DownloadsWeekly Downloads

    275

    Version

    1.1.3

    License

    MIT

    Unpacked Size

    23.6 kB

    Total Files

    11

    Last publish

    Collaborators

    • burnpiro