react-focus-trap

---

---

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

Usage

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={ this.props.active }>
        Amazing stuff goes here
      </FocusTrap>
    )
  }
})

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. Exists 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

Changelog

1.1.0

• Add conditional around document access to allow isomorphic rendering
• Bump dependency list to allow for React 0.14. This will still expose warnings in the console about deprecation warnings, however it should unblock 0.14 development in the meantime.