\n\nThe final solution for WAI ARIA compatible Modal Dialogs or any full-screen tasks:\n- locks __focus__ inside using [react-focus-lock](https://github.com/theKashey/react-focus-lock)\n- disables page __scroll__ and user interactions using [react-remove-scroll](https://github.com/theKashey/react-remove-scroll)\n- hides rest of a page from screen-readers using [aria-hidden](https://github.com/theKashey/aria-hidden)\n\nNow you could __focus on__ a single task.\n\n> This is basically the `inert` \n\n_Minimal_ size - __no more than 2kb__, _maximal_ - no more that 6kb. See sidecar example for details.\n\n## Example\nCode sandbox example - https://codesandbox.io/s/p3vjp8mzw7\n```js\nimport {FocusOn} from 'react-focus-on';\n\n\n content you should be \"focused\" on\n\n```\n\n# API\n### FocusOn\n`FocusOn` - the focus on component\n - `enabled` - controls behaviour\n - `[shards]` - a list of Refs to be considered as a part of the Lock. A way to properly handle portals or scattered lock.\n--- \n - `[autoFocus=true]` - enables or disables `auto focus` management (see [react-focus-lock documentation](https://github.com/theKashey/react-focus-lock))\n - `[returnFocus=true]` - enables or disables `return focus` on lock deactivation (see [react-focus-lock documentation](https://github.com/theKashey/react-focus-lock))\n - `[whiteList=fn]` - you could whitelist locations FocusLock should carry about. Everything outside it will ignore. For example - any modals (see [react-focus-lock documentation](https://github.com/theKashey/react-focus-lock))\n - `[crossFrame=true]` - enables or disables cross frame focus trapping. Setting this to false allows focus to move outside iframes (see [react-focus-lock issue](https://github.com/theKashey/react-focus-lock/issues/104))\n---\n - `[gapMode]` - the way removed ScrollBar would be _compensated_ - margin(default), or padding. See [scroll-locky documentation](https://github.com/theKashey/react-scroll-locky#gap-modes) to find the one you need.\n - `[noIsolation]` - disables aria-hidden isolation\n - `[inert]` - enables pointer-events isolation (☠️ dangerous, use to disable \"parent scrollbars\", refer to [react-remove-scroll](https://github.com/theKashey/react-remove-scroll) documentation)\n - `[allowPinchZoom]` - enables \"pinch-n-zoom\" behavior. By default it might be prevented, refer to [react-remove-scroll](https://github.com/theKashey/react-remove-scroll) documentation\n - `[preventScrollOnFocus]` - prevents a [side effect of a programatic page scroll](https://github.com/theKashey/react-focus-on/issues/62) caused by focusing elements. Especially useful to address modal animations.\n---\n - `[onActivation]` - on activation callback\n - `[onDeactivation]` - on deactivation callback\n---\n - `[onClickOutside]` - on click outside of \"focus\" area. (actually on any event \"outside\")\n - `[onEscapeKey]` - on Esc key down (and not defaultPrevented)\n \n## Additional API\n### Exposed from React-Focus-Lock\n - `AutoFocusInside` - to mark autofocusable element\n - `MoveFocusInside` - to move focus inside a component on mount\n - `InFocusGuard` - to \"guard\" a shard node (place an invisible node before and after)\n \nSee [react-focus-lock](https://github.com/theKashey/react-focus-lock) documentation for details.\n \n### Exposed from React-Remove-Scroll\n - `classNames.fullWidth` - \"100%\" width (will not change on scrollbar removal)\n - `classNames.zeroRight` - \"0\" right (will not change on scrollbar removal)\n \nSee [react-remove-scroll](https://github.com/theKashey/react-remove-scroll) for details.\n\n> PS: Version 1 used React-scroll-locky which was replaced by remove-scroll.\n\n# Size\n- (🧩 full) 5.7kb after compression (excluding tslib).\n---\n- (👁 UI) __2kb__, visual elements only\n- (🚗 sidecar) 4kb, side effects \n \n### Import full\n```js\nimport {FocusOn} from 'react-focus-on';\n\n\n {content}\n \n``` \n\n### Import UI only\n```js\nimport {FocusOn} from 'react-focus-on/UI';\nimport {sidecar} from \"use-sidecar\";\n\nconst FocusOnSidecar = sidecar( \n () => import(/* webpackPrefetch: true */ \"react-focus-on/sidecar\")\n);\n\n\n {content}\n \n```\n\n# React versions\n- v1 and v2 might work with React 15/16\n- v3 require React 16.8+ (hooks)\n\n# Licence\n MIT\n \n","readmeFilename":"README.md"}
![](\"https://img.shields.io/npm/v/react-focus-on.svg?style=flat-square\")
\n \n \n \n ![\"Build](\"https://img.shields.io/travis/theKashey/react-focus-on.svg?style=flat-square\")
\n \n\n \n ![\"npm](\"https://img.shields.io/npm/dm/react-focus-on.svg\")
\n \n\n \n ![\"bundle](\"https://img.shields.io/bundlephobia/minzip/react-focus-on.svg\")
\n \n