3.9.4 • Published 10 months ago

react-focus-on v3.9.4

Weekly downloads
62,773
License
MIT
Repository
github
Last release
10 months ago

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

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

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
  • [shards] - a list of Refs to be considered as a part of the Lock. A way to properly handle portals or scattered lock.


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

Exposed from React-Focus-Lock

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

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

@yattho/gatsby-theme-rigitus@codecademy/gamut-labscl2-front@joey.andres/eui@infinitebrahmanuniverse/nolb-react-fo@everything-registry/sub-chunk-2555@vectara/searchspid-react-button-update@crossed/ui@crossed/primitive@commonground/design-system@commondatafactory/design-systemjitsi-meet-stepupjitsi-fmtechiss-va-component-libraryiss-va-component-library-2terra-abstract-modal@artsy/palette@amorphic/amorphic-ui-core@amoo_miki/oui@auspices/eos@adventera/vectara-ui@bannv/eui-latest@bc-digital/bronte@bridgetool/gatsby-theme-dev@bsfishy/oui@actionishope/shelley@actionishope/shelley-puma@actovos-consulting-group/ui-core@codecademy/gamut@dej611/spid-react-button@department-of-veterans-affairs/react-components@department-of-veterans-affairs/component-library@david-vectara/react-chatbotwazuh-wui@edhos/ui@edunext/paragon@ethomson/gatsby-theme-npm-doctocat@inoft/eui@kothawleprem/vectara-react-chatbot@kothawleprem/vectara-react-search-metadatafilter@littlespoon/drawer@lanyun_cd/elastic_ui@lanyun_cd/eui@muusa/eui@edx/paragon@elastic/eui@moda/om@kaizen/draft-title-block-zen@kaizen/components@kaizen/date-picker@ifrc-go/ui@randomnerd/eui@primer/gatsby-theme-doctocat@primer/doctocat-nextjs@sami616/components@open-codes/opencodes@openedx/paragon@pjfitzgibbons/oui@oclock/crumble@opensearch-project/oui@opensearch-staging/oui@palustris/react-imagesmolekuleoneai-analyticsreact-native-jitsi-meet-sdk-fmtechreact-images2react-imagesreact-images-lazy-loadreact-native-sdk-fmtechmdlz-prmtz@wazuh/wui@westpac/sidebar@westpac/modal@wedgekit/modal@wedgekit/popover@wonderflow/react-components@ulugbekov/react-images@umuthopeyildirim/react-chatbot@vectara/react-chatbot@vectara/react-search@vectara/vectara-ui@zalastax/nolb-react-fo@tensei/euicreedcustomizedelasticuiforc1fury-design-systemgatsby-theme-doctornpmgatsby-theme-primer-wikigatsby-theme-wikinotesg-nimbus-ui@start-base/react-form-elements@superficial-ui/components@superficial-ui/core
3.9.4

10 months ago

3.9.3

1 year ago

3.9.2

1 year ago

3.9.1

2 years ago

3.8.2

2 years ago

3.9.0

2 years ago

3.8.1

2 years ago

3.8.0

2 years ago

3.7.0

3 years ago

3.6.0

3 years ago

3.5.4

4 years ago

3.5.3

4 years ago

3.5.2

4 years ago

3.5.1

5 years ago

3.5.0

5 years ago

3.4.1

5 years ago

3.4.0

5 years ago

3.3.0

6 years ago

3.2.0

6 years ago

3.1.5

6 years ago

3.1.4

6 years ago

3.1.3

6 years ago

3.1.2

6 years ago

3.1.1

6 years ago

3.1.0

6 years ago

3.0.7

6 years ago

3.0.6

6 years ago

3.0.5

6 years ago

3.0.4

6 years ago

3.0.3

6 years ago

3.0.1

6 years ago

3.0.0

6 years ago

2.0.2

6 years ago

2.0.1

6 years ago

2.0.0

6 years ago

1.3.2

6 years ago

1.3.1

7 years ago

1.3.0

7 years ago

1.2.1

7 years ago

1.2.0

7 years ago

1.1.0

7 years ago

1.0.0

7 years ago

0.0.0-beta.1

7 years ago

0.0.0-beta

7 years ago