theKashey / React Focus On
Licence: mit
🎯 Solution for WAI ARIA compatible modal dialogs or full-screen tasks, you were looking for
Stars: ✭ 180
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to React Focus On
focus-trap-vue
Vue component to trap the focus within a DOM element
Stars: ✭ 156 (-13.33%)
Mutual labels: lock, focus
React Locky
"🔒-y" – Asgardian God of Event Scoping 📦, Scroll Locking 📜, Silence Casting 🙊
Stars: ✭ 141 (-21.67%)
Mutual labels: lock, scroll
React Scrollchor
A React component for scroll to `#hash` links with smooth animations
Stars: ✭ 141 (-21.67%)
Mutual labels: scroll
Java Concurrency Examples
Java Concurrency/Multithreading Tutorial with Examples for Dummies
Stars: ✭ 173 (-3.89%)
Mutual labels: lock
Aria2
突破百度云限速合集,另外附带Baidu-Go、Tampermonkey、Proxyee-down教程。从此云端女友从不断线,有了这个它,忘掉那个她!
Stars: ✭ 1,796 (+897.78%)
Mutual labels: aria
Jxpatternlock
An easy-to-use, powerful, customizable pattern lock view in swift. 图形解锁/手势解锁 / 手势密码 / 图案密码 / 九宫格密码
Stars: ✭ 165 (-8.33%)
Mutual labels: lock
Node Proper Lockfile
An inter-process and inter-machine lockfile utility that works on a local or network file system.
Stars: ✭ 139 (-22.78%)
Mutual labels: lock
Unitydynamicscrollrect
An optimized approach to lists with dozens of elements and a Pooling system
Stars: ✭ 157 (-12.78%)
Mutual labels: scroll
Aioredlock
🔒 The asyncio implemetation of Redis distributed locks
Stars: ✭ 171 (-5%)
Mutual labels: lock
Lock Threads
GitHub Action that locks closed issues and pull requests after a period of inactivity
Stars: ✭ 156 (-13.33%)
Mutual labels: lock
Focusoverlay
Library for creating animated overlays on focused elements
Stars: ✭ 167 (-7.22%)
Mutual labels: focus
Vue Prlx
🔮 Vue.js parallax directive you were looking for (can animate translate & background-position)
Stars: ✭ 140 (-22.22%)
Mutual labels: scroll
Composer Lock Diff
See what has changed after a composer update
Stars: ✭ 154 (-14.44%)
Mutual labels: lock
Easy
开源的Java开发脚手架,工作经验总结,springboot,springcloud,基于tk-mybatis代码反向生成,基于redis(redisson)注解形式加分布式锁等,计划将用该脚手架抄袭jeesite和ruoyi还有基于vue的后台权限管理系统做一套开源的后台管理和cms系统,域名服务器已买好,脚手架还在继续更新中,更新完毕开始更新easysite
Stars: ✭ 160 (-11.11%)
Mutual labels: lock
Scroll Js
Light cross-browser scroller that uses native javascript
Stars: ✭ 179 (-0.56%)
Mutual labels: scroll
Snappyrecyclerview
An extension to RecyclerView which will snap to child Views to the specified anchor, START, CENTER or END.
Stars: ✭ 178 (-1.11%)
Mutual labels: scroll
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
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.
-
[autoFocus=true]
- enables or disablesauto focus
management (see react-focus-lock documentation) -
[returnFocus=true]
- enables or disablesreturn 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)
-
[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
-
[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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].