useFocus

Handles focus events for the immediate target. Focus events on child elements will be ignored.

install	`yarn add @react-aria/interactions`
version	3.8.3
usage	`import {useFocus} from '@react-aria/interactions'`

View repository

GitHub

View package

NPM

API#

useFocus(
  (props: FocusProps
)): FocusResult

Features#

useFocus handles focus interactions for an element. Unlike React's built-in focus events, useFocus does not fire focus events for child elements of the target. This matches DOM behavior where focus events do not bubble. This is similar to the :focus pseudo class in CSS.

To handle focus events on descendants of an element, see useFocusWithin.

Usage#

useFocus returns props that you should spread onto the target element:

Name	Type	Description
`focusProps`	`HTMLAttributes<HTMLElement>`	Props to spread onto the target element.

useFocus supports the following event handlers:

Name	Type	Description
`onFocus`	`( (e: FocusEvent )) => void`	Handler that is called when the element receives focus.
`onBlur`	`( (e: FocusEvent )) => void`	Handler that is called when the element loses focus.
`onFocusChange`	`( (isFocused: boolean )) => void`	Handler that is called when the element's focus status changes.

Example#

This example shows a simple input element that handles focus events with useFocus and logs them to a list below.

NOTE: for more advanced text field functionality, see useTextField.