react-use-focus-trap

1.1.7 • Public • Published

React Focus Trap (react-use-focus-trap)

ci

An extremely helpful React Hook to trap the focusable elements.

(The underlying Guideline: https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html)

Improvement or feedback of any kind is always appreciated!

The Issue with Modals

When implementing Modals, people tend to forget that pro-users and users that are permanently or temporarily restricted will use other inputs than the mouse - e.g., a keyboard.

Sad Face

Now tabbing through a modal most often leads to the focus going z- or y-wise below the Modal. Good luck finding your way back then! It's a horror show. That's the point where this library comes into play. Add this hook, and lock ("trap") the focus into the modal.

Happy Face

Installation

npm install react-use-focus-trap

Usage

import React from "react";
import { useFocusTrap } from "react-use-focus-trap";

export function NiceModal() {
  const [trapRef] = useFocusTrap();

  return (
    <div class="my-weird-modal" ref={trapRef}>
      Foobar
    </div>
  );
}

Developing

There is a demo application for easy debugging included. To start developing, simply execute these commands:

npm install
npm run build
npm link
cd demo
npm install
npm start

This opens up a dev-server with a silly modal to test your code in.

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
1.1.751latest

Version History

VersionDownloads (Last 7 Days)Published
1.1.751
1.1.60
1.1.50
1.1.40
1.1.30
1.1.20
1.1.10
1.1.00
1.0.10
1.0.00

Package Sidebar

Install

npm i react-use-focus-trap

Weekly Downloads

51

Version

1.1.7

License

MIT

Unpacked Size

1.58 MB

Total Files

32

Last publish

Collaborators

  • activenode