The final solution for WAI ARIA compatible Modal Dialogs or any full-screen tasks:
- locks __focus__ inside using react-focus-lock
- disables 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.

> This is basically the inert

_Minimal_ size - __no more than 2kb__, _maximal_ - no more that 6kb. See sidecar example for details.

Example

Code sandbox example - https://codesandbox.io/s/p3vjp8mzw7
``js
import {FocusOn} from 'react-focus-on';

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

`

API

$3

FocusOn - the focus on component
- enabled - controls behaviour
- [shards] - a list of Refs to be considered as a part of the Lock. A way to properly handle portals or scattered lock.
---
- [autoFocus=true] - enables or disables auto focus management (see react-focus-lock documentation)
- [returnFocus=true] - enables or disables return focus on lock deactivation (see react-focus-lock documentation)
- [whiteList=fn] - you could whitelist locations FocusLock should carry about. Everything outside it will ignore. For example - any modals (see react-focus-lock documentation)
- [crossFrame=true] - enables or disables cross frame focus trapping. Setting this to false allows focus to move outside iframes (see react-focus-lock issue)
---
- [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)
- [allowPinchZoom] - enables "pinch-n-zoom" behavior. By default it might be prevented, refer to react-remove-scroll documentation
- [preventScrollOnFocus] - prevents a side effect of a programatic page scroll caused by focusing elements. Especially useful to address modal animations.
---
- [onActivation] - on activation callback
- [onDeactivation] - on deactivation callback
---
- [onClickOutside] - on click outside of "focus" area. (actually on any event "outside")
- [onEscapeKey] - on Esc key down (and not defaultPrevented)

Additional API

$3

- AutoFocusInside - to mark autofocusable element
- MoveFocusInside - to move focus inside a component on mount
- InFocusGuard - to "guard" a shard node (place an invisible node before and after)

See react-focus-lock documentation for details.

$3

- 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

$3

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


{content}

`

$3


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

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

sideCar={FocusOnSidecar}
>
{content}

``

React versions

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

Licence

MIT