Repository files navigation

👁 React-Focus-On

lock and loaded!

The final solution for WAI ARIA compatible Modal Dialogs or any full-screen tasks:

• locksfocus inside usingreact-focus-lock
• disables pagescroll and user interactions usingreact-remove-scroll
• hides rest of a page from screen-readers usingaria-hidden

Now you couldfocus on a single task.

This is basically theinert

Minimal size -no more than 2kb,maximal - no more that 6kb. See sidecar example for details.

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

import{FocusOn}from'react-focus-on';<FocusOnonClickOutside={callback}onEscapeKey={callback}shards={[externalRef]}> content you should be "focused" on</FocusOn>

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 disablesauto focus management (seereact-focus-lock documentation)
• [returnFocus=true] - enables or disablesreturn focus on lock deactivation (seereact-focus-lock documentation)
• [whiteList=fn] - you could whitelist locations FocusLock should carry about. Everything outside it will ignore. For example - any modals (seereact-focus-lock documentation)
• [crossFrame=true] - enables or disables cross frame focus trapping. Setting this to false allows focus to move outside iframes (seereact-focus-lock issue)

• [gapMode] - the way removed ScrollBar would becompensated - margin(default), or padding. Seescroll-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 toreact-remove-scroll documentation)
• [allowPinchZoom] - enables "pinch-n-zoom" behavior. By default it might be prevented, refer toreact-remove-scroll documentation
• [preventScrollOnFocus] - prevents aside 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)

• 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)

Seereact-focus-lock documentation for details.

• classNames.fullWidth - "100%" width (will not change on scrollbar removal)
• classNames.zeroRight - "0" right (will not change on scrollbar removal)

Seereact-remove-scroll for details.

PS: Version 1 used React-scroll-locky which was replaced by remove-scroll.

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

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

import{FocusOn}from'react-focus-on';<FocusOn>{content}</FocusOn>

import{FocusOn}from'react-focus-on/UI';import{sidecar}from"use-sidecar";constFocusOnSidecar=sidecar(()=>import(/* webpackPrefetch: true */"react-focus-on/sidecar"));<FocusOnsideCar={FocusOnSidecar}>{content}</FocusOn>

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

MIT