useVisibilityToggle

@hua-labs/hua/motion

애니메이션이 포함된 가시성 토글

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

기본 사용법

tsx

const visibility = useVisibilityToggle({
  hideOpacity: 0,
  hideScale: 0.9,
  hideTranslateY: 10,
  duration: 300,
});

return (
  <>
    <button onClick={visibility.toggle}>Toggle</button>
    <div ref={visibility.ref} style={visibility.style}>
      {visibility.isVisible ? "Visible" : "Hidden"}
    </div>
  </>
);

docs:hooks.use-visibility-toggle.examples.programmaticShowHide

tsx

const panel = useVisibilityToggle({
  hideOpacity: 0,
  hideTranslateX: -20,
  duration: 250,
  easing: "ease-in-out",
});

return (
  <div className="flex gap-4">
    <button onClick={panel.show}>Show Panel</button>
    <button onClick={panel.hide}>Hide Panel</button>
    <div ref={panel.ref} style={panel.style} className="panel">
      Side Panel Content
    </div>
  </div>
);

API 레퍼런스

옵션

이름	타입	기본값	설명
duration	number	300	docs:hooks.use-visibility-toggle.options.duration
easing	string	"ease-out"	docs:hooks.use-visibility-toggle.options.easing
showScale	number	1	docs:hooks.use-visibility-toggle.options.showScale
showOpacity	number	1	docs:hooks.use-visibility-toggle.options.showOpacity
showTranslateY	number	0	docs:hooks.use-visibility-toggle.options.showTranslateY
showTranslateX	number	0	docs:hooks.use-visibility-toggle.options.showTranslateX
hideScale	number	0.8	docs:hooks.use-visibility-toggle.options.hideScale
hideOpacity	number	0	docs:hooks.use-visibility-toggle.options.hideOpacity
hideTranslateY	number	20	docs:hooks.use-visibility-toggle.options.hideTranslateY
hideTranslateX	number	0	docs:hooks.use-visibility-toggle.options.hideTranslateX

반환값

이름	타입	설명
ref	RefObject<T \| null>	docs:hooks.use-visibility-toggle.returns.ref
style	CSSProperties	docs:hooks.use-visibility-toggle.returns.style
isVisible	boolean	docs:hooks.use-visibility-toggle.returns.isVisible
isAnimating	boolean	docs:hooks.use-visibility-toggle.returns.isAnimating
progress	number	docs:hooks.use-visibility-toggle.returns.progress
toggle	() => void	docs:hooks.use-visibility-toggle.returns.toggle
show	() => void	docs:hooks.use-visibility-toggle.returns.show
hide	() => void	docs:hooks.use-visibility-toggle.returns.hide
start	() => void	docs:hooks.use-visibility-toggle.returns.start
stop	() => void	docs:hooks.use-visibility-toggle.returns.stop
reset	() => void	docs:hooks.use-visibility-toggle.returns.reset
pause	() => void	docs:hooks.use-visibility-toggle.returns.pause
resume	() => void	docs:hooks.use-visibility-toggle.returns.resume

사용 사례

모달

모달 열기/닫기 애니메이션

드롭다운

드롭다운 메뉴 애니메이션

툴팁

툴팁 표시/숨김 애니메이션

펼치기/접기

아코디언 및 확장 패널 애니메이션

useButtonEffect useNavigation