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

lock and loaded!

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-remove-scroll
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

Minimal size - no more than 2kb, maximal - no more that 6kb.

Example

Code sandbox example - https://codesandbox.io/s/p3vjp8mzw7

import {FocusOn} from 'react-focus-on';

<FocusOn
 onClickOutside={callback}
 onEscapeKey={callback}
 shards={[externalRef]}
>
 content you should be "focused" on
</FocusOn>

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 aria-hidden isolation
[inert] - enables pointer-events isolation (☠️ dangerous, use to disable "parent scrollbars", refer to react-remove-scroll documentation)
[shards] - a list of Refs to be considered as a part of locks.

Additional API

Exposed from React-Focus-Lock

AutoFocusInside - to mark autofocusable element
MoveFocusInside - to move focus inside or a component mount
InFocusGuard - 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.

Size

(🧩 full) 5.7kb after compression (excluding tslib).

(👁 UI) 2kb, visual elements only
(🚗 sidecar) 4kb, side effects

Import full

import {FocusOn} from 'react-focus-on';

<FocusOn>
 {content}
</FocusOn>

Import UI only

import {FocusOn} from 'react-focus-on/UI';
import {sidecar} from "use-sidecar";

const FocusOnSidecar = sidecar(  
  () => import(/* webpackPrefetch: true */ "react-focus-on/sidecar")
);

<FocusOn
    sideCar={FocusOnSidecar}
>
 {content}
</FocusOn>

React versions

v1 and v2 might work with React 15/16
v3 require React 16.8+ (hooks)

Licence

MIT