https://github.com/vigetlabs/react-focus-trap

Traps focus for accessible dropdowns and modal content
https://github.com/vigetlabs/react-focus-trap

a11y dropdowns modals react

Last synced: about 1 year ago
JSON representation

Traps focus for accessible dropdowns and modal content

• Host: GitHub
• URL: https://github.com/vigetlabs/react-focus-trap
• Owner: vigetlabs
• License: mit
• Created: 2014-12-12T18:39:15.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2022-05-23T14:45:22.000Z (about 4 years ago)
• Last Synced: 2025-04-13T04:09:17.256Z (about 1 year ago)
• Topics: a11y, dropdowns, modals, react
• Language: JavaScript
• Homepage: https://react-focus-trap.netlify.com
• Size: 511 KB
• Stars: 81
• Watchers: 31
• Forks: 11
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          
[![NPM](https://nodei.co/npm/react-focus-trap.png?compact=true)](https://npmjs.org/package/react-focus-trap)

---

[![Circle CI](https://circleci.com/gh/vigetlabs/react-focus-trap.svg?style=svg)](https://circleci.com/gh/vigetlabs/react-focus-trap)

---

A generic focus management tool for components such as dialogs and dropdowns.

![focus](https://cloud.githubusercontent.com/assets/590904/7422697/c648ecae-ef5c-11e4-8570-5bcf6819f53d.gif)

## Usage

React Focus Trap is a container element that will manage focus for its children.

```javascript

let Modal = React.createClass({

  render() {

    return (

      

        Amazing stuff goes here

      

    )

  }

})

```

When Focus Trap is active, it will do several things:

1. Ensure focus remains on its content

2. Exits when clicks outside of the container occur

3. Exits when the escape key is pressed

## Props

| Name       | Default               | Description                                           |

| ---------- | --------------------- | ----------------------------------------------------- |

| active     | `true`                | Should the FocusTrap render?                          |

| className  | `'focus-trap'`         | The class of the inner container that maintains focus |

| onExit     | `null`                | Callback when escape or an outside click occurs       |

| element    | `'div'`               | The tag name of the inner container                   |

| role       | `'dialog'`            | The aria role for the inner container                 |

***



  



Visit [code.viget.com](http://code.viget.com) to see more projects from [Viget.](https://viget.com)