react-focus-lock
Advanced tools
react-focus-lock - npm Package Compare versions
Comparing version 1.11.2 to 1.11.3
@@ -15,5 +15,5 @@ 'use strict'; | ||
| var _reactSideEffect = require('react-side-effect'); | ||
| var _reactClientsideEffect = require('react-clientside-effect'); | ||
| var _reactSideEffect2 = _interopRequireDefault(_reactSideEffect); | ||
| var _reactClientsideEffect2 = _interopRequireDefault(_reactClientsideEffect); | ||
@@ -141,2 +141,2 @@ var _focusLock = require('focus-lock'); | ||
| exports.default = (0, _reactSideEffect2.default)(reducePropsToState, handleStateChangeOnClient)(FocusTrap); | ||
| exports.default = (0, _reactClientsideEffect2.default)(reducePropsToState, handleStateChangeOnClient)(FocusTrap); |
| { | ||
| "name": "react-focus-lock", | ||
| "version": "1.11.2", | ||
| "version": "1.11.3", | ||
| "description": "It is a trap! (for a focus)", | ||
@@ -76,4 +76,4 @@ "main": "dist/index.js", | ||
| "prop-types": "^15.0.0", | ||
| "react-side-effect": "^1.1.3" | ||
| "react-clientside-effect": "^1.0.0" | ||
| } | ||
| } |
@@ -11,2 +11,3 @@ <div align="left"> | ||
| [](https://circleci.com/gh/theKashey/react-focus-lock/tree/master) | ||
| [](https://www.npmjs.com/package/react-focus-lock) | ||
@@ -21,17 +22,16 @@ <hr/> | ||
| This is a small, but very useful for: | ||
| - Modal dialogs. You can not leave it with "Tab", ie tab-out. | ||
| - Focused tasks. It will aways brings you back. | ||
| This is a small library, but very useful for: | ||
| - Modal dialogs. You can not leave it with "Tab", ie do a "tab-out". | ||
| - Focused tasks. It will aways brings you back, as you can "lock" user inside a component. | ||
| You have to use it in _every_ modal dialog, or you `a11y` will be shitty. | ||
| You have to lock _every_ modal dialog, that's what `a11y` is asking for. | ||
| This is most comprehensive focus lock/trap ever built. | ||
| And this is most comprehensive focus lock/trap ever built. | ||
| # Features | ||
| - no keyboard control, everything is done watching a __focus behavior__. Thus works always and everywhere. | ||
| - no keyboard control, everything is done watching a __focus behavior__, not emulating tabs. Thus works always and everywhere. | ||
| - React __Portals__ support. Even if some data is in outerspace - it is [still in lock](https://github.com/theKashey/react-focus-lock/issues/19). | ||
| - _Scattered_ locks, or focus lock groups - you can setup different isolated locks, and _tab_ from from to another. | ||
| - Controllable isolation level. | ||
| - _Scattered_ locks, or focus lock groups - you can setup different isolated locks, and _tab_ from one to another. | ||
| - Controllable isolation level. | ||
| # How to use | ||
@@ -51,5 +51,8 @@ Just wrap something with focus lock, and focus will be `moved inside` on mount. | ||
| That is actually not enough, as long it is better to "shadow" rest of the page, to make it unclickable or | ||
| unscrollable. And there is [react-locky](https://github.com/theKashey/react-locky) to do this job. | ||
| ### Final piece for a modals | ||
| That is actually not enough, - you shall not lock the focus, but also disable page scroll and user iteractions with the rest of a page - "shadow" rest of the page, to make it unclickable or | ||
| unscrollable. | ||
| And [react-locky](https://github.com/theKashey/react-locky) is your next component to check. | ||
| # WHY? | ||
@@ -138,4 +141,2 @@ From [MDN Article about accessible dialogs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role): | ||
| # How it works | ||
@@ -149,3 +150,11 @@ Everything thing is simple - react-focus-lock just dont left focus left boundaries of component, and | ||
| Uses [focus-lock](https://github.com/theKashey/focus-lock/) under the hood. It does also provide support for Vue.js and Vanilla DOM solutions | ||
| # More | ||
| Dont forget to lock the scroll to complete the picture. | ||
| [react-scroll-locky](https://github.com/theKashey/react-scroll-locky) - browser scrollbars hiding, you were looking for. | ||
| # Warning! | ||
| Two different _focus-lock-managers_ or even different version of a single one, active | ||
| simultaneously will FIGHT! | ||
| # Licence | ||
@@ -152,0 +161,0 @@ MIT |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.92%
71520
- Number of lines in readme file
- increased by6%
159
Dependency changes
+ Added@babel/runtime@7.26.0(transitive)
+ Addedreact-clientside-effect@1.2.7(transitive)
+ Addedregenerator-runtime@0.14.1(transitive)
- Removedreact-side-effect@^1.1.3
- Removedreact-side-effect@1.2.0(transitive)
- Removedshallowequal@1.1.0(transitive)