Traps focus for accessible dropdowns and modal content
JavaScript CSS Makefile HTML
Latest commit f1003f8 Oct 21, 2016 @nhunzaker nhunzaker 2.3.3
Failed to load latest commit information.
test Properly trap focus for autofocus Oct 21, 2016
.eslintrc.json Update dependencies, remove role attribute, update return focus Jul 19, 2016
.gitignore [add] Active prop, new build config Apr 15, 2015
Makefile Adding plug to README Dec 23, 2015
circle.yml Remove coverage, add circle.yml for newer node support Jul 19, 2016
karma.conf.js Add proper loaders to karma config Jul 19, 2016
package.json 2.3.3 Oct 21, 2016


Circle CI

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



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

let Modal = React.createClass({
  render() {
    return (
      <FocusTrap onExit={ this._onExit } active={ }>
        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


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

Code At Viget

Visit to see more projects from Viget.