https://github.com/fed/modal-focus-trap
Simple modal focus trap implementation
https://github.com/fed/modal-focus-trap
a11y focus-trap keyboard-navigation modal
Last synced: about 2 months ago
JSON representation
Simple modal focus trap implementation
- Host: GitHub
- URL: https://github.com/fed/modal-focus-trap
- Owner: fed
- Created: 2019-10-19T14:03:48.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-04-07T06:30:48.000Z (about 5 years ago)
- Last Synced: 2025-03-02T19:07:32.380Z (about 2 months ago)
- Topics: a11y, focus-trap, keyboard-navigation, modal
- Language: TypeScript
- Homepage: https://npm.im/modal-focus-trap
- Size: 318 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# modal-focus-trap
[](https://travis-ci.org/fknussel/modal-focus-trap)
[](https://npm.im/modal-focus-trap)
[](https://npm.im/modal-focus-trap)
[](https://opensource.org/licenses/MIT)
This is a very simple and lightweight helper function that makes it easier to set up a focus trap in a modal window. This implementation is not library specific and can therefore be used with VanillaJS, React or any other library/framework.
## How to use
First import the helper function. You don't necessarily need to name it `focusTrap`, you can use any name you want.
```js
import focusTrap from 'modal-focus-trap';
```
Set up the focus trap by passing in an `HTMLElement` which is your modal element. The function returns a callback you can use later on to disengage the focus trap. Cache this callback somewhere in your code, you will need it later.
```js
const modalElement = document.querySelector('.modal');
let restoreFocus = focusTrap(modalElement);
```
After closing the modal, you need to disengage the focus trap and restore the focus to the previously focused element by invoking the callback:
```js
if (restoreFocus) {
restoreFocus();
restoreFocus = null;
}
```
## Using with React
You can also create a hook to use this helper with React:
```js
import { useRef, useEffect } from 'react';
import focusTrap from 'modal-focus-trap';
export default function useFocusTrap() {
const ref = useRef(null);
// Create on didMount.
useEffect(() => {
const destroy = focusTrap(ref.current);
// Destroy on willUnmount.
return destroy;
}, []);
return ref;
}
```
See this [sample project](https://codesandbox.io/s/react-focus-trap-demo-bzitn) for more info.