📱

@lani.ground/react-device-detector

React Component Library

Production Ready

TypeScript

🎯

Device Detector Examples

💻

현재 디바이스 정보

실시간으로 감지된 디바이스 정보를 확인할 수 있습니다.

Desktop

디바이스 상태

📱 Phone:✗

📱 Tablet:✗

🖥️ Desktop:✓

창 크기

너비:0px

높이:0px

🔄

실시간 테스트

창 크기를 조절해보세요! 브레이크포인트에 따라 디바이스 유형이 실시간으로 변경됩니다.

📱 Phone: ≤ 720px | 📱 Tablet: ≤ 1024px | 💻 Desktop: > 1024px

🎯

Code Examples

📝

기본 사용법

DeviceDetectorProvider로 앱을 감싸고 useDeviceDetect hook을 사용합니다.

1import { DeviceDetectorProvider, useDeviceDetect } from '@lani.ground/react-device-detector';
2
3function App() {
4  return (
5    <DeviceDetectorProvider>
6      <MyComponent />
7    </DeviceDetectorProvider>
8  );
9}
10
11function MyComponent() {
12  const deviceInfo = useDeviceDetect();
13
14  return (
15    <div>
16      {deviceInfo.isPhone && <div>📱 모바일 UI</div>}
17      {deviceInfo.isTablet && <div>📱 태블릿 UI</div>}
18      {deviceInfo.isDesktop && <div>💻 데스크톱 UI</div>}
19    </div>
20  );
21}

⚙️

커스텀 브레이크포인트

사용자 정의 브레이크포인트를 설정할 수 있습니다.

1import { DeviceDetectorProvider } from '@lani.ground/react-device-detector';
2
3const customBreakpoints = {
4  PHONE: 600,        // 600px 이하는 Phone
5  TABLET: 900,       // 900px 이하는 Tablet
6  SMALL_DESKTOP: 1200 // 1200px 이하는 Small Desktop
7};
8
9function App() {
10  return (
11    <DeviceDetectorProvider breakPoints={customBreakpoints}>
12      <MyComponent />
13    </DeviceDetectorProvider>
14  );
15}

🎯

조건부 렌더링

디바이스 타입에 따라 다른 컴포넌트를 렌더링합니다.

1function ResponsiveComponent() {
2  const { isPhone, isTablet, isDesktop, isSmallDesktop } = useDeviceDetect();
3
4  if (isPhone) {
5    return <MobileLayout />;
6  }
7
8  if (isTablet) {
9    return <TabletLayout />;
10  }
11
12  if (isSmallDesktop) {
13    return <SmallDesktopLayout />;
14  }
15
16  return <DesktopLayout />;
17}

🎯

API Documentation

🔧

useDeviceDetect Hook

반환값:

1{
2  isPhone: boolean,
3  isTablet: boolean,
4  isDesktop: boolean,
5  isSmallDesktop?: boolean
6}

Device Types:

Property	Type	Description
isPhone	boolean	화면 너비가 720px 이하인지 여부
isTablet	boolean	화면 너비가 1024px 이하인지 여부
isDesktop	boolean	화면 너비가 1024px 초과인지 여부
isSmallDesktop	boolean?	커스텀 브레이크포인트 설정 시 제공

🏭

DeviceDetectorProvider

Props:

Property	Type	Description
children	ReactNode	하위 컴포넌트들
breakPoints	BreakPoints?	커스텀 브레이크포인트 설정

BreakPoints Interface:

1interface BreakPoints {
2  PHONE: number;           // 기본값: 720
3  TABLET: number;          // 기본값: 1024
4  SMALL_DESKTOP?: number;   // 선택사항
5}