Function: useFocusVisible()

@arolariu/components

---

@arolariu/components / useFocusVisible

Function: useFocusVisible()

useFocusVisible(): object

Defined in: hooks/useFocusVisible.tsx:49

Detects whether the current focus originated from keyboard navigation.

Returns

object

An object containing the current focus-visible state and focus handlers to spread on the target element.

isFocusVisible

isFocusVisible: boolean

focusProps

focusProps: FocusVisibleProps

Remarks

Tracks global keyboard and pointer input so consumers can render focus rings only when users are tabbing through the interface. This mirrors the intent of :focus-visible while remaining available to JavaScript-driven components and custom states.

Example

const {isFocusVisible, focusProps} = useFocusVisible();

return (
  <button
    type="button"
    {...focusProps}
    className={isFocusVisible ? "ring" : undefined}>
    Click
  </button>
);

See

MDN :focus-visible