Skip to content
Docs
훅으로 돌아가기

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 레퍼런스

옵션

이름타입기본값설명
initialStatebooleanfalsedocs:hooks.use-focus-toggle.options.initialState
toggleOnFocusbooleantruedocs:hooks.use-focus-toggle.options.toggleOnFocus
toggleOnBlurbooleanfalsedocs:hooks.use-focus-toggle.options.toggleOnBlur
autoResetbooleanfalsedocs:hooks.use-focus-toggle.options.autoReset
resetDelaynumber3000docs:hooks.use-focus-toggle.options.resetDelay
toggleOnFocusInbooleanfalsedocs:hooks.use-focus-toggle.options.toggleOnFocusIn
toggleOnFocusOutbooleanfalsedocs:hooks.use-focus-toggle.options.toggleOnFocusOut
preventDefaultbooleanfalsedocs:hooks.use-focus-toggle.options.preventDefault
stopPropagationbooleanfalsedocs:hooks.use-focus-toggle.options.stopPropagation
showOnMountbooleanfalsedocs:hooks.use-focus-toggle.options.showOnMount

반환값

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

사용 사례

폼 입력

포커스 시 입력 필드 강조

접근 가능한 UI

키보드 탐색 포커스 시각화

검색 바

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

드롭다운

드롭다운 메뉴 애니메이션