react-focus-trap
Traps focus for accessible dropdowns and modal content.
Last updated 4 years ago .
· Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-focus-trap 
SYNC missed versions from official npm registry.

NPM


Circle CI


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

focus

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

Code At Viget

Visit code.viget.com to see more projects from Viget.

Current Tags

  • 2.6.0-beta.0                                ...           beta (4 years ago)
  • 2.7.1                                ...           latest (4 years ago)
  • 1.1.2                                ...           support (6 years ago)

35 Versions

  • 0.0.1                                ...           7 years ago
  • 0.1.0                                ...           7 years ago
  • 0.1.1                                ...           7 years ago
  • 0.2.0                                ...           7 years ago
  • 0.3.0                                ...           7 years ago
  • 0.4.0                                ...           7 years ago
  • 0.5.0                                ...           7 years ago
  • 0.5.1                                ...           7 years ago
  • 0.5.2                                ...           7 years ago
  • 0.6.0                                ...           7 years ago
  • 0.6.1                                ...           7 years ago
  • 0.7.0-alpha                                ...           7 years ago
  • 0.7.0                                ...           7 years ago
  • 0.8.0                                ...           7 years ago
  • 1.0.0                                ...           7 years ago
  • 1.0.1                                ...           7 years ago
  • 1.0.2                                ...           7 years ago
  • 1.0.3                                ...           7 years ago
  • 1.1.0                                ...           7 years ago
  • 1.2.0                                ...           7 years ago
  • 1.1.1                                ...           7 years ago
  • 2.0.0                                ...           7 years ago
  • 1.1.2                                ...           6 years ago
  • 2.1.0                                ...           6 years ago
  • 2.2.0                                ...           6 years ago
  • 2.3.0                                ...           6 years ago
  • 2.3.1                                ...           6 years ago
  • 2.3.2                                ...           6 years ago
  • 2.3.3                                ...           6 years ago
  • 2.4.0                                ...           5 years ago
  • 2.5.0                                ...           5 years ago
  • 2.6.0-beta.0                                ...           4 years ago
  • 2.6.0                                ...           4 years ago
  • 2.7.0                                ...           4 years ago
  • 2.7.1                                ...           4 years ago
Dependencies (0)
None
Dev Dependencies (0)
None

Copyright © npmmirror.com | 浙ICP备15033595号-63 |