@react-aria/focus

What is @react-aria/focus?

@react-aria/focus is a library that provides accessible focus management utilities for React applications. It helps in managing focus behavior in a way that is compliant with accessibility standards.

What are @react-aria/focus's main functionalities?

useFocusRing

The `useFocusRing` hook provides a way to apply focus styles to an element when it is focused. It returns properties to spread on the element and a boolean indicating if the focus is visible.

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

function MyComponent() {
  let { isFocusVisible, focusProps } = useFocusRing();
  return (
    <button {...focusProps} style={{ outline: isFocusVisible ? '2px solid blue' : 'none' }}>
      Click me
    </button>
  );
}

FocusScope

The `FocusScope` component manages focus within a contained area. It ensures that focus stays within the scope and can restore focus to the previously focused element when the scope is unmounted.

import { FocusScope } from '@react-aria/focus';

function MyComponent() {
  return (
    <FocusScope contain restoreFocus autoFocus>
      <input placeholder="First input" />
      <input placeholder="Second input" />
    </FocusScope>
  );
}

useFocusWithin

The `useFocusWithin` hook provides a way to detect if any element within a container has focus. It returns properties to spread on the container and a boolean indicating if focus is within the container.

import { useFocusWithin } from '@react-aria/focus';

function MyComponent() {
  let { isFocusWithin, focusWithinProps } = useFocusWithin();
  return (
    <div {...focusWithinProps} style={{ border: isFocusWithin ? '2px solid green' : 'none' }}>
      <input placeholder="Focus within me" />
    </div>
  );
}

Other packages similar to @react-aria/focus

react-focus-lock

react-focus-lock is a library that provides a way to lock focus within a particular area of the DOM. It is useful for managing focus in modal dialogs and other focus-trapping scenarios. Compared to @react-aria/focus, it offers a more focused solution for focus trapping but lacks the broader range of focus management utilities.

focus-trap-react

focus-trap-react is a library that provides a React wrapper for the focus-trap library. It allows you to trap focus within a DOM node, ensuring that users cannot tab out of the node. This package is similar to @react-aria/focus in its focus-trapping capabilities but does not offer additional focus management hooks like useFocusRing or useFocusWithin.

react-a11y

react-a11y is a library that provides a set of accessibility utilities for React applications, including focus management. It offers a broader range of accessibility features compared to @react-aria/focus, which is more specialized in focus management.

README

@react-aria/focus

This package is part of react-spectrum. See the repo for more details.