@radix-ui/react-focus-scope

What is @radix-ui/react-focus-scope?

The @radix-ui/react-focus-scope package is designed to manage focus for UI components, ensuring that keyboard navigation is contained within a specific part of the application. This is particularly useful for modal dialogs, menus, and other components that require focused interaction. It helps in creating accessible and user-friendly interfaces by managing focus order and trapping focus within a specific DOM element.

What are @radix-ui/react-focus-scope's main functionalities?

Focus Trapping

This feature traps focus within the elements wrapped by <FocusScope>. The 'loop' prop allows focus to cycle through the elements inside the scope instead of escaping to elements outside.

import { FocusScope } from '@radix-ui/react-focus-scope';

function App() {
  return (
    <FocusScope loop>
      <div>
        <input />
        <input />
        <button>Click me</button>
      </div>
    </FocusScope>
  );
}

Auto Focus

Automatically focuses the first focusable element within the <FocusScope> when the component mounts. This is useful for directing user attention to a specific part of the application, such as opening a modal dialog.

import { FocusScope } from '@radix-ui/react-focus-scope';

function Dialog() {
  return (
    <FocusScope autoFocus>
      <div tabIndex={-1}>
        <h2>Dialog Title</h2>
        <p>Some content inside the dialog.</p>
        <button>Close</button>
      </div>
    </FocusScope>
  );
}

Other packages similar to @radix-ui/react-focus-scope

focus-trap-react

focus-trap-react is a React component that traps focus within a DOM element. It is similar to @radix-ui/react-focus-scope in its focus trapping functionality but differs in implementation and API design. While @radix-ui/react-focus-scope is part of the Radix UI design system offering a more comprehensive UI solution, focus-trap-react focuses specifically on the focus trapping feature.

react-focus-lock

react-focus-lock provides focus management for React applications, ensuring that keyboard users can navigate through focusable elements within a locked area. It shares similar goals with @radix-ui/react-focus-scope in creating accessible UI components. However, react-focus-lock offers additional features like auto-focusing and return focus on deactivation, making it a more feature-rich option for certain use cases.

README

react-focus-scope

Installation

$ yarn add @radix-ui/react-focus-scope
# or
$ npm install @radix-ui/react-focus-scope

Usage

This is an internal utility, not intended for public usage.