useBreakpoint

@hua-labs/ui

설치

bash

npm install @hua-labs/hua

Import

tsx

import { useBreakpoint } from "@hua-labs/hua/framework";

@hua-labs/motion-core의 모션 훅을 @hua-labs/hua/framework에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

기본 사용법

tsx

import { useBreakpoint } from '@hua-labs/ui';

const { current, isAbove } = useBreakpoint();

return (
  <div>
    Current: {current}
    {isAbove('md') && <Sidebar />}
  </div>
);

API 레퍼런스

옵션

이름	타입	기본값	설명
breakpoints	Record<string, number>	-	docs:hooks.use-breakpoint.options.breakpoints

반환값

이름	타입	설명
current	string	docs:hooks.use-breakpoint.returns.current
isAbove	(breakpoint: string) => boolean	docs:hooks.use-breakpoint.returns.isAbove
isBelow	(breakpoint: string) => boolean	docs:hooks.use-breakpoint.returns.isBelow

사용 사례

반응형 레이아웃

화면 크기 변화 감지 및 대응

usePerformanceMonitorPro useAnimatedEntrance