useWindowSize

@hua-labs/hua/motion

윈도우 크기 추적 — 반응형 레이아웃 감지용

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

tsx

const { width, height, isMounted } = useWindowSize();

if (!isMounted) return null;

return (
  <p>Window: {width} x {height}</p>
);

이름	타입	기본값	설명
debounce	number	100	docs:hooks.use-window-size.options.debounce
initialWidth	number	0	docs:hooks.use-window-size.options.initialWidth
initialHeight	number	0	docs:hooks.use-window-size.options.initialHeight

이름	타입	설명
width	number	docs:hooks.use-window-size.returns.width
height	number	docs:hooks.use-window-size.returns.height
isMounted	boolean	docs:hooks.use-window-size.returns.isMounted

화면 크기 변화 감지 및 대응

화면 크기 기반 컴포넌트 표시

캔버스/SVG 크기 동적 조정

모바일/태블릿/데스크탑 분기