Components
Responsive
모바일과 데스크톱 환경에 따라 다른 컴포넌트를 렌더링하는 헬퍼 컴포넌트입니다.
Desktop View
"use client";import { Responsive } from "@/registry/default/components/responsive";export function ResponsiveExample() { return ( <Responsive desktop={ <div className="flex items-center justify-center p-8 border-2 border-dashed rounded-xl bg-muted/50"> <p className="text-xl font-medium text-muted-foreground">Desktop View</p> </div> } mobile={ <div className="flex items-center justify-center p-8 border-2 border-dashed rounded-xl bg-primary/10"> <p className="text-xl font-medium text-primary">Mobile View</p> </div> } /> );}설치
pnpm
pnpm dlx shadcn@latest add @chaesunbak/responsivenpm
npx shadcn@latest add @chaesunbak/responsive다음 코드를 프로젝트에 복사/붙혀넣기 하세요.
import { useIsMobile } from "@/hooks/use-mobile";export function Responsive({ desktop, mobile,}: { desktop?: React.ReactNode; mobile?: React.ReactNode;}) { const isMobile = useIsMobile(); return isMobile ? mobile : desktop;}사용법
import { Responsive } from "@/components/responsive";<Responsive
desktop={<DesktopComponent />}
mobile={<MobileComponent />}
/>인터페이스
Responsive
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
desktop | ReactNode | - | 데스크톱 환경에서 렌더링할 요소 |
mobile | ReactNode | - | 모바일 환경에서 렌더링할 요소 |