useUserAgent

ua-parser-js 를 활용해서 window.navigator.userAgent 정보를 분석하고 파싱한 데이터를 반환하는 커스텀 훅입니다.

Code

🔗 실제 구현 코드 확인

Interface

typescript

const useUserAgent: () => UAParser.IResult | null

Usage

typescript

import { useUserAgent } from '@modern-kit/react';

const Example = () => {
  const userAgent = useUserAgent();

  return (
    <div>
      <div>
        <h3>UserAgent String</h3>
        <p>ua: {`${userAgent?.ua}`}</p>
      </div>
      <div>
        <h3>Browser</h3>
        <p>name: {`${userAgent?.browser.name}`}</p>
        <p>version: {`${userAgent?.browser.version}`}</p>
        <p>major: {`${userAgent?.browser.major}`}</p>
      </div>
      <div>
        <h3>Engine</h3>
        <p>name: {`${userAgent?.engine.name}`}</p>
        <p>version: {`${userAgent?.engine.version}`}</p>
      </div>
      <div>
        <h3>OS</h3>
        <p>name: {`${userAgent?.os.name}`}</p>
        <p>version: {`${userAgent?.os.version}`}</p>
      </div>
      <div>
        <h3>Device</h3>
        <p>vendor: {`${userAgent?.device.vendor}`}</p>
        <p>model: {`${userAgent?.device.model}`}</p>
        <p>type: {`${userAgent?.device.type}`}</p>
      </div>
      <div>
        <h3>CPU</h3>
        <p>architecture: {`${userAgent?.cpu.architecture}`}</p>
      </div>
    </div>
  );
};

Example