Use mobilestandard

화면 폭이 모바일 기준(768px 미만)인지 알려 주는 훅(hook)입니다. shadcn base-nova 의 stock 아이템이며 sidebar 가 모바일 판단에 씁니다. 파일은 hooks/use-mobile.ts 로 설치됩니다.

설치

pnpm dlx shadcn@4.23.0 add @uikit/use-mobile

사용

import { useIsMobile } from "@/hooks/use-mobile";
export function Layout() {  const isMobile = useIsMobile();  return <p>{isMobile ? "Mobile layout" : "Desktop layout"}</p>;}

속성

기준 폭 768 은 파일 안의 상수 MOBILE_BREAKPOINT 입니다. 바꾸려면 설치된 파일을 직접 고칩니다.

기본으로 지키는 것

• 767px 이하는 true, 768px 이상은 false 입니다.
• matchMedia("(max-width: 767px)") 의 change 이벤트로 값을 갱신하고, 언마운트하면 리스너를 거둡니다.
• 브라우저에서만 그리는 첫 렌더부터 실제 폭으로 값을 돌려줍니다. 서버 렌더와 하이드레이션 첫 렌더에는 false 이므로 서버 렌더 결과는 데스크톱 모양입니다.
• window.matchMedia 가 없는 환경에서는 던지지 않고 현재 폭으로만 판정하며 갱신하지 않습니다.

접근성

화면에 그리는 요소가 없는 훅이라 키 조작과 접근성 트리에 영향이 없습니다.

의존

npm 패키지 없이 react 만 씁니다.