React Focus Trap (react-use-focus-trap)
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.
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.
Installation
npm install react-use-focus-trapUsage
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 startThis opens up a dev-server with a silly modal to test your code in.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent