Package Exports

react-focus-on

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-focus-on) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

👁 React-Focus-On

The final solution for WAI ARIA compatible modal dialogs or full-screen tasks.

locks focus inside. Using react-focus-lock
disabled page scroll and user interactions. Using react-scroll-locky
hides rest of a page from screen-readers. Using aria-hidden

Now you could focus on a single task.

This is basically inert

API

FocusOn

FocusOn - the focus on component

enabled(true) - controls behaviour
[autoFocus] - enables of disabled auto focus management (see [react-focus-lock documentation])
[onActivation] - on activation callback
[onDeactivation] - on deactivation callback
[onClickOutside] - on click outside of "focus" area. (actually on any event "outside")
[onEscapeKey] - on Esc key pressed (and not defaultPrevented)

Additional API

Exposed from React-Focus-Lock

AutoFocusInside - to mark autofocusable element
MoveFocusInside - to move focus inside or a component mount

Exposed from React-Scroll-Locky

FocusPane - to create a container with proper dimensions (it's more about right coordinate) set.

Licence

MIT