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 any 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.
Works on any browser and any platform. Roughly 5kb, excluding babel-runtime and tslib, shared with other libraries.
This is basically
inert
API
FocusOn
FocusOn - the focus on component
enabled- 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)[gapMode]- the way removed ScrollBar would be compensated - margin(default), or padding. See scroll-locky documentation to find the one you need.[noIsolation]- disables pointer event isolation[shards]- a list of Refs to be considered as a part of locks.
Additional API
Exposed from React-Focus-Lock
AutoFocusInside- to mark autofocusable elementMoveFocusInside- to move focus inside or a component mountInFocusGuard- to "guard" shard node.
See react-focus-lock for details.
Exposed from React-Remove-Scroll
classNames.fullWidth- "100%" width (will not change on scrollbar removal)classNames.zeroRight- "0" right (will not change on scrollbar removal)
See React-Remove-Scroll for details.
PS: Version 1 used React-scroll-locky which was replaced by remove-scroll.
Licence
MIT