useClickToggle

@hua-labs/hua/motion

클릭 토글 상태 관리

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

기본 사용법

tsx

const { isActive, clickHandlers } = useClickToggle();

return (
  <button
    {...clickHandlers}
    className={isActive ? 'bg-primary text-white' : 'bg-secondary'}
  >
    {isActive ? 'Active' : 'Inactive'}
  </button>
);

API 레퍼런스

옵션

이름	타입	기본값	설명
initialState	boolean	false	docs:hooks.use-click-toggle.options.initialState
toggleOnClick	boolean	true	docs:hooks.use-click-toggle.options.toggleOnClick
toggleOnDoubleClick	boolean	false	docs:hooks.use-click-toggle.options.toggleOnDoubleClick
toggleOnEnter	boolean	true	docs:hooks.use-click-toggle.options.toggleOnEnter
toggleOnSpace	boolean	true	docs:hooks.use-click-toggle.options.toggleOnSpace
toggleOnRightClick	boolean	false	docs:hooks.use-click-toggle.options.toggleOnRightClick
autoReset	boolean	false	docs:hooks.use-click-toggle.options.autoReset
resetDelay	number	3000	docs:hooks.use-click-toggle.options.resetDelay
preventDefault	boolean	false	docs:hooks.use-click-toggle.options.preventDefault
stopPropagation	boolean	false	docs:hooks.use-click-toggle.options.stopPropagation
showOnMount	boolean	false	docs:hooks.use-click-toggle.options.showOnMount

반환값

이름	타입	설명
isActive	boolean	docs:hooks.use-click-toggle.returns.isActive
mounted	boolean	docs:hooks.use-click-toggle.returns.mounted
clickHandlers	{ onClick?, onDoubleClick?, onContextMenu?, onKeyDown? }	docs:hooks.use-click-toggle.returns.clickHandlers
toggle	() => void	docs:hooks.use-click-toggle.returns.toggle
activate	() => void	docs:hooks.use-click-toggle.returns.activate
deactivate	() => void	docs:hooks.use-click-toggle.returns.deactivate
reset	() => void	docs:hooks.use-click-toggle.returns.reset

사용 사례

토글 버튼

on/off 상태 전환 애니메이션

펼치기/접기

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

선택 UI

항목 선택/해제 애니메이션

접근 가능한 UI

키보드 탐색 포커스 시각화

useToggleMotion useFocusToggle