useFocusToggle

@hua-labs/hua/motion

포커스 상태 토글 및 애니메이션

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

기본 사용법

tsx

const { isActive, focusHandlers } = useFocusToggle();

return (
  <input
    {...focusHandlers}
    className={isActive ? 'ring-2 ring-primary' : ''}
    placeholder="Focus me"
  />
);

API 레퍼런스

옵션

이름	타입	기본값	설명
initialState	boolean	false	docs:hooks.use-focus-toggle.options.initialState
toggleOnFocus	boolean	true	docs:hooks.use-focus-toggle.options.toggleOnFocus
toggleOnBlur	boolean	false	docs:hooks.use-focus-toggle.options.toggleOnBlur
autoReset	boolean	false	docs:hooks.use-focus-toggle.options.autoReset
resetDelay	number	3000	docs:hooks.use-focus-toggle.options.resetDelay
toggleOnFocusIn	boolean	false	docs:hooks.use-focus-toggle.options.toggleOnFocusIn
toggleOnFocusOut	boolean	false	docs:hooks.use-focus-toggle.options.toggleOnFocusOut
preventDefault	boolean	false	docs:hooks.use-focus-toggle.options.preventDefault
stopPropagation	boolean	false	docs:hooks.use-focus-toggle.options.stopPropagation
showOnMount	boolean	false	docs:hooks.use-focus-toggle.options.showOnMount

반환값

이름	타입	설명
isActive	boolean	docs:hooks.use-focus-toggle.returns.isActive
mounted	boolean	docs:hooks.use-focus-toggle.returns.mounted
ref	RefObject<HTMLElement \| null>	docs:hooks.use-focus-toggle.returns.ref
focusHandlers	{ onFocus?, onBlur?, onFocusIn?, onFocusOut? }	docs:hooks.use-focus-toggle.returns.focusHandlers
toggle	() => void	docs:hooks.use-focus-toggle.returns.toggle
activate	() => void	docs:hooks.use-focus-toggle.returns.activate
deactivate	() => void	docs:hooks.use-focus-toggle.returns.deactivate
reset	() => void	docs:hooks.use-focus-toggle.returns.reset

사용 사례

폼 입력

포커스 시 입력 필드 강조

접근 가능한 UI

키보드 탐색 포커스 시각화

검색 바

검색 입력 포커스 애니메이션

드롭다운

드롭다운 메뉴 애니메이션

useClickToggle useButtonEffect