useFocusToggle

@hua-labs/hua/motion

bash

npm install @hua-labs/hua

tsx

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

tsx

const { isActive, focusHandlers } = useFocusToggle();

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


initialState	boolean	false	Initial active state
toggleOnFocus	boolean	true	Toggle on focus event
toggleOnBlur	boolean	false	Toggle on blur event
autoReset	boolean	false	Auto-deactivate after delay
resetDelay	number	3000	Auto-reset delay in milliseconds
toggleOnFocusIn	boolean	false	Toggle on focusin event
toggleOnFocusOut	boolean	false	Toggle on focusout event
preventDefault	boolean	false	Prevent default event behavior
stopPropagation	boolean	false	Stop event propagation
showOnMount	boolean	false	Show initial state on mount (SSR safety)


isActive	boolean	Current toggle state
mounted	boolean	Hydration safety flag
ref	RefObject<HTMLElement \| null>	Ref to attach to target element
focusHandlers	{ onFocus?, onBlur?, onFocusIn?, onFocusOut? }	Event handlers to spread on element
toggle	() => void	Toggle state manually
activate	() => void	Activate (set to true)
deactivate	() => void	Deactivate (set to false)
reset	() => void	Reset to initial state

useClickToggle useWindowSize