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 adds a default blue focus ring on focusable elements. Use this hook if you want to customize it's styling for accessibility or other reasons.

Install

Yarn

yarn add @react-native-aria/focus

npm

npm install @react-native-aria/focus

Import

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

API

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

FocusRingProps

• Props for FocusRing

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