Mallik Cheripally
All open source

react-refocus

Focus-management primitives for React: trapping, restoration, keyboard order, and announcements.

For React apps with dialogs, menus and composite keyboard widgets.

npm install react-refocus
GitHubnpmDocumentation

When you need it

Any component that takes focus away from the page has to give it back correctly: a dialog must hold the tab ring, a menu must restore what was focused before it opened, and a composite widget needs a tab order that survives its own re-renders. These are the primitives for that, rather than one component that owns your markup.

Capabilities

  • Focus trapping

    Keep focus inside modals, dialogs and overlays until they close.

  • Focus restoration

    Return focus to the previously focused element automatically.

  • Focus order management

    Adjust tab order as the layout changes.

  • Keyboard navigation

    Menus, dropdowns and lists that behave under the keyboard.

  • Screen-reader announcements

    Announce focus changes to assistive technology.

Example

A dialog holds the tab ring for as long as it is open.

import { FocusTrap } from 'react-refocus';

const MyComponent = () => (
  <FocusTrap>
    <div>
      <button>Button 1</button>
      <button>Button 2</button>
    </div>
  </FocusTrap>
);