useButtonEffect

@hua-labs/hua/motion

버튼 클릭 리플 및 상태 피드백 애니메이션

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

기본 사용법

tsx

const btn = useButtonEffect({
  type: "scale",
  hoverScale: 1.05,
  activeScale: 0.95,
  duration: 150,
});

return (
  <button
    ref={btn.ref}
    style={btn.style}
    onMouseDown={btn.pressButton}
    onMouseUp={btn.releaseButton}
    onMouseEnter={() => btn.setButtonState("hover")}
    onMouseLeave={() => btn.setButtonState("idle")}
  >
    Click me
  </button>
);

docs:hooks.use-button-effect.examples.rippleEffect

tsx

const btn = useButtonEffect({
  type: "ripple",
  rippleColor: "rgba(255, 255, 255, 0.5)",
  rippleDuration: 600,
  duration: 200,
});

return (
  <button
    ref={btn.ref}
    style={btn.style}
    className="relative overflow-hidden bg-primary text-white px-6 py-3 rounded-lg"
    onMouseDown={btn.pressButton}
    onMouseUp={btn.releaseButton}
  >
    Ripple Button
    {btn.isAnimating && (
      <span
        style={{
          position: "absolute",
          left: btn.ripplePosition.x,
          top: btn.ripplePosition.y,
          width: 100,
          height: 100,
          borderRadius: "50%",
          background: btn.rippleColor,
          transform: "translate(-50%, -50%) scale(0)",
          animation: "ripple 600ms ease-out",
        }}
      />
    )}
  </button>
);

API 레퍼런스

옵션

이름	타입	기본값	설명
type	"scale" \| "ripple" \| "glow" \| "shake" \| "bounce" \| "slide" \| "custom"	"scale"	docs:hooks.use-button-effect.options.type
duration	number	200	docs:hooks.use-button-effect.options.duration
easing	string	"ease-out"	docs:hooks.use-button-effect.options.easing
scaleAmount	number	0.95	docs:hooks.use-button-effect.options.scaleAmount
rippleColor	string	"rgba(255, 255, 255, 0.6)"	docs:hooks.use-button-effect.options.rippleColor
glowColor	string	"#3b82f6"	docs:hooks.use-button-effect.options.glowColor
hoverScale	number	1.05	docs:hooks.use-button-effect.options.hoverScale
activeScale	number	0.95	docs:hooks.use-button-effect.options.activeScale
disabled	boolean	false	docs:hooks.use-button-effect.options.disabled
autoStart	boolean	false	docs:hooks.use-button-effect.options.autoStart

반환값

이름	타입	설명
ref	RefObject<T \| null>	docs:hooks.use-button-effect.returns.ref
style	CSSProperties	docs:hooks.use-button-effect.returns.style
isPressed	boolean	docs:hooks.use-button-effect.returns.isPressed
isHovered	boolean	docs:hooks.use-button-effect.returns.isHovered
isFocused	boolean	docs:hooks.use-button-effect.returns.isFocused
isAnimating	boolean	docs:hooks.use-button-effect.returns.isAnimating
buttonType	string	docs:hooks.use-button-effect.returns.buttonType
ripplePosition	{ x: number; y: number }	docs:hooks.use-button-effect.returns.ripplePosition
pressButton	() => void	docs:hooks.use-button-effect.returns.pressButton
releaseButton	() => void	docs:hooks.use-button-effect.returns.releaseButton
setButtonState	(state: "idle" \| "hover" \| "active" \| "focus" \| "disabled") => void	docs:hooks.use-button-effect.returns.setButtonState
start	() => void	docs:hooks.use-button-effect.returns.start
stop	() => void	docs:hooks.use-button-effect.returns.stop
reset	() => void	docs:hooks.use-button-effect.returns.reset

사용 사례

버튼

버튼 호버 및 클릭 피드백 효과

인터랙티브 UI

제스처 기반 인터랙티브 컴포넌트

폼 제출

폼 제출 중 버튼 상태 변경

CTA 요소

클릭 유도 버튼 강조 애니메이션

useFocusToggle useVisibilityToggle