useFocusRing (Web only)

Determines whether a focus ring should be shown to indicate keyboard focus. Focus rings are visible only when the user is interacting with a keyboard, not with a mouse, touch, or other input methods.

note

React Native Web by default adds a focus ring but currently doesn't provide a way to customize it's appearance.

Install#

yarn add @react-native-aria/focus

Import#

import { useFocusRing } from '@react-native-aria/focus'

API#

useFocusRing(props: FocusRingProps, ref: RefObject): FocusRingAria

FocusRingProps#

FocusRingAria#

/** Whether the element is currently focused. */
isFocused: boolean,
/** Whether keyboard focus should be visible. */
isFocusVisible: boolean,
/** Props to apply to the container element with the focus ring. */
focusProps: HTMLAttributes<HTMLElement>

Example#

Edit this page