useDetectDevice

Introduce

현재 디바이스의 유형(moblie, desktop), OS 및 Browser를 감지합니다.

userAgent의 업데이트로 인하여 올바르게 작동하지 않을 수 있습니다. 유의해서 사용해주세요.

interface UseDeviceDetectReturns {
  isMobile: boolean;
  isDesktop: boolean;
  os: string;
  browser: string;
}
 
const useDetectDevice = (): UseDeviceDetectReturns

Returns

isMobile : 사용 중인 디바이스의 Mobile 여부를 나타냅니다.
isDesktop : 사용 중인 디바이스의 Desktop 여부를 나타냅니다.
os : 사용 중인 디바이스의 OS 이름(문자열)을 나타냅니다.
cf) Windows, macOS, Linux, Android, iOS
browser : 사용 중인 브라우저의 이름(문자열)을 나타냅니다.
cf) Chrome, Safari, Whale, Edge, Firefox

Examples

TestComponent.tsx

const TestComponent = () => {
 
  const { isMobile, os, browser } = useDeviceDetect();
 
  return (
    <div>
      <div>
        {isMobile && (
          <>
            <div>모바일 환경에 최적화된 콘텐츠</div>
            <div>...</div>
          </>
        )}
    </div>
  );
};

useDelayFlag useGeolocation