react-dismiss 0.1.1 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +24 -0
- package/package.json +9 -3
package/README.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
A tiny React hook for dismissing UI when users interact outside or press Escape.
|
|
4
4
|
|
|
5
|
+
**[Live Demo on CodeSandbox](https://codesandbox.io/s/xzwc87)**
|
|
6
|
+
|
|
5
7
|
## Installation
|
|
6
8
|
|
|
7
9
|
```bash
|
|
@@ -77,9 +79,29 @@ useDismiss<T extends HTMLElement>(
|
|
|
77
79
|
|
|
78
80
|
`void`
|
|
79
81
|
|
|
82
|
+
### Multiple refs — dismiss only outside all of them
|
|
83
|
+
|
|
84
|
+
The first argument accepts one ref or several. Dismissal runs only when the event is outside all of them. A click inside any ref does not dismiss.
|
|
85
|
+
|
|
86
|
+
```ts
|
|
87
|
+
useDismiss([menuRef, panelRef], () => setIsOpen(false));
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
### Ignore option — clicks on ignored refs never dismiss
|
|
91
|
+
|
|
92
|
+
`options.ignore` accepts one ref or several. Clicks on ignored refs never dismiss.
|
|
93
|
+
|
|
94
|
+
```ts
|
|
95
|
+
useDismiss(menuRef, () => setIsOpen(false), {
|
|
96
|
+
ignore: toggleRef,
|
|
97
|
+
});
|
|
98
|
+
```
|
|
99
|
+
|
|
80
100
|
## What It Handles
|
|
81
101
|
|
|
82
102
|
- Outside interactions (`pointerdown` or `click`) while ignoring clicks on descendants inside `ref`.
|
|
103
|
+
- Multiple refs: dismissal runs only when the interaction is outside all of them.
|
|
104
|
+
- Ignore option: clicks on ignored refs never dismiss.
|
|
83
105
|
- Escape key presses (`keydown` where `event.key === "Escape"`).
|
|
84
106
|
- Null or unmounted refs without throwing errors.
|
|
85
107
|
- Automatic event listener cleanup on component unmount or when options change.
|
|
@@ -94,8 +116,10 @@ Ships with built-in TypeScript declarations and generics (`dist/index.d.ts`), no
|
|
|
94
116
|
- **Zero dependencies**: Only requires `react` (>= 18) as a peer dependency.
|
|
95
117
|
- **Tiny footprint**: ~1.3 KB uncompressed ESM/CJS build (< 1 KB minified + gzipped).
|
|
96
118
|
- **Ref-stable callback**: Passing inline callback functions will not re-bind document listeners on re-render.
|
|
119
|
+
- One hook, not a hook library — no need to install a whole utilities package for a single outside-click handler.
|
|
97
120
|
|
|
98
121
|
## Links
|
|
99
122
|
|
|
123
|
+
- **Live Demo**: [codesandbox.io/s/xzwc87](https://codesandbox.io/s/xzwc87)
|
|
100
124
|
- **npm**: [npmjs.com/package/react-dismiss](https://www.npmjs.com/package/react-dismiss)
|
|
101
125
|
- **GitHub**: [github.com/parasraju/react-dismiss](https://github.com/parasraju/react-dismiss)
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-dismiss",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "0.2.0",
|
|
4
|
+
"description": "Tiny React hook that dismisses dropdowns, popovers and modals on outside click or Escape — multiple refs and an ignore option, zero dependencies.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
7
7
|
"react-hook",
|
|
@@ -11,7 +11,13 @@
|
|
|
11
11
|
"popover",
|
|
12
12
|
"dropdown",
|
|
13
13
|
"modal",
|
|
14
|
-
"typescript"
|
|
14
|
+
"typescript",
|
|
15
|
+
"click-away",
|
|
16
|
+
"useClickAway",
|
|
17
|
+
"react-hooks",
|
|
18
|
+
"useDismiss",
|
|
19
|
+
"useClickOutside",
|
|
20
|
+
"escape"
|
|
15
21
|
],
|
|
16
22
|
"license": "MIT",
|
|
17
23
|
"author": "",
|