@usefy/use-on-click-outside 0.0.17 → 0.0.19

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.
Files changed (2) hide show
  1. package/README.md +30 -46
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -112,31 +112,36 @@ A hook that detects clicks outside of specified element(s).
112
112
 
113
113
  #### Parameters
114
114
 
115
- | Parameter | Type | Description |
116
- | --------- | ------------------------ | -------------------------------------------------- |
117
- | `ref` | `RefTarget<T>` | Single ref or array of refs to detect outside clicks for |
118
- | `handler` | `OnClickOutsideHandler` | Callback function called when a click outside is detected |
119
- | `options` | `UseOnClickOutsideOptions` | Configuration options |
115
+ | Parameter | Type | Description |
116
+ | --------- | -------------------------- | --------------------------------------------------------- |
117
+ | `ref` | `RefTarget<T>` | Single ref or array of refs to detect outside clicks for |
118
+ | `handler` | `OnClickOutsideHandler` | Callback function called when a click outside is detected |
119
+ | `options` | `UseOnClickOutsideOptions` | Configuration options |
120
120
 
121
121
  #### Options
122
122
 
123
- | Option | Type | Default | Description |
124
- | ---------------- | --------------------------- | -------------- | ----------------------------------------------------- |
125
- | `enabled` | `boolean` | `true` | Whether the event listener is active |
126
- | `capture` | `boolean` | `true` | Use event capture phase (immune to stopPropagation) |
127
- | `eventType` | `MouseEventType` | `"mousedown"` | Mouse event type to listen for |
128
- | `touchEventType` | `TouchEventType` | `"touchstart"` | Touch event type to listen for |
129
- | `detectTouch` | `boolean` | `true` | Whether to detect touch events (mobile support) |
130
- | `excludeRefs` | `RefObject<HTMLElement>[]` | `[]` | Refs to exclude from outside click detection |
131
- | `shouldExclude` | `(target: Node) => boolean` | `undefined` | Custom function to determine if target should be excluded |
132
- | `eventTarget` | `Document \| HTMLElement \| Window` | `document` | The event target to attach listeners to |
123
+ | Option | Type | Default | Description |
124
+ | ---------------- | ----------------------------------- | -------------- | --------------------------------------------------------- |
125
+ | `enabled` | `boolean` | `true` | Whether the event listener is active |
126
+ | `capture` | `boolean` | `true` | Use event capture phase (immune to stopPropagation) |
127
+ | `eventType` | `MouseEventType` | `"mousedown"` | Mouse event type to listen for |
128
+ | `touchEventType` | `TouchEventType` | `"touchstart"` | Touch event type to listen for |
129
+ | `detectTouch` | `boolean` | `true` | Whether to detect touch events (mobile support) |
130
+ | `excludeRefs` | `RefObject<HTMLElement>[]` | `[]` | Refs to exclude from outside click detection |
131
+ | `shouldExclude` | `(target: Node) => boolean` | `undefined` | Custom function to determine if target should be excluded |
132
+ | `eventTarget` | `Document \| HTMLElement \| Window` | `document` | The event target to attach listeners to |
133
133
 
134
134
  #### Types
135
135
 
136
136
  ```typescript
137
137
  type ClickOutsideEvent = MouseEvent | TouchEvent;
138
138
  type OnClickOutsideHandler = (event: ClickOutsideEvent) => void;
139
- type MouseEventType = "mousedown" | "mouseup" | "click" | "pointerdown" | "pointerup";
139
+ type MouseEventType =
140
+ | "mousedown"
141
+ | "mouseup"
142
+ | "click"
143
+ | "pointerdown"
144
+ | "pointerup";
140
145
  type TouchEventType = "touchstart" | "touchend";
141
146
  type RefTarget<T extends HTMLElement> =
142
147
  | React.RefObject<T | null>
@@ -188,11 +193,9 @@ function Dropdown() {
188
193
  const menuRef = useRef<HTMLDivElement>(null);
189
194
 
190
195
  // Both button and menu are considered "inside"
191
- useOnClickOutside(
192
- [buttonRef, menuRef],
193
- () => setIsOpen(false),
194
- { enabled: isOpen }
195
- );
196
+ useOnClickOutside([buttonRef, menuRef], () => setIsOpen(false), {
197
+ enabled: isOpen,
198
+ });
196
199
 
197
200
  return (
198
201
  <>
@@ -410,12 +413,12 @@ This package maintains comprehensive test coverage to ensure reliability and sta
410
413
 
411
414
  ### Test Coverage
412
415
 
413
- | Category | Coverage |
414
- | ---------- | ------------------ |
415
- | Statements | 97.61% (41/42) |
416
- | Branches | 93.93% (31/33) |
417
- | Functions | 100% (7/7) |
418
- | Lines | 97.61% (41/42) |
416
+ | Category | Coverage |
417
+ | ---------- | -------------- |
418
+ | Statements | 97.61% (41/42) |
419
+ | Branches | 93.93% (31/33) |
420
+ | Functions | 100% (7/7) |
421
+ | Lines | 97.61% (41/42) |
419
422
 
420
423
  ### Test Categories
421
424
 
@@ -504,25 +507,6 @@ pnpm test --coverage
504
507
 
505
508
  ---
506
509
 
507
- ## Related Packages
508
-
509
- Explore other hooks in the **@usefy** collection:
510
-
511
- | Package | Description |
512
- | ------------------------------------------------------------------------------------------ | ----------------------------------- |
513
- | [@usefy/use-click-any-where](https://www.npmjs.com/package/@usefy/use-click-any-where) | Document-wide click detection |
514
- | [@usefy/use-toggle](https://www.npmjs.com/package/@usefy/use-toggle) | Boolean state management |
515
- | [@usefy/use-counter](https://www.npmjs.com/package/@usefy/use-counter) | Counter state management |
516
- | [@usefy/use-debounce](https://www.npmjs.com/package/@usefy/use-debounce) | Value debouncing |
517
- | [@usefy/use-debounce-callback](https://www.npmjs.com/package/@usefy/use-debounce-callback) | Debounced callbacks |
518
- | [@usefy/use-throttle](https://www.npmjs.com/package/@usefy/use-throttle) | Value throttling |
519
- | [@usefy/use-throttle-callback](https://www.npmjs.com/package/@usefy/use-throttle-callback) | Throttled callbacks |
520
- | [@usefy/use-local-storage](https://www.npmjs.com/package/@usefy/use-local-storage) | localStorage state synchronization |
521
- | [@usefy/use-session-storage](https://www.npmjs.com/package/@usefy/use-session-storage) | sessionStorage state synchronization|
522
- | [@usefy/use-copy-to-clipboard](https://www.npmjs.com/package/@usefy/use-copy-to-clipboard) | Clipboard operations |
523
-
524
- ---
525
-
526
510
  ## License
527
511
 
528
512
  MIT © [mirunamu](https://github.com/geon0529)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@usefy/use-on-click-outside",
3
- "version": "0.0.17",
3
+ "version": "0.0.19",
4
4
  "description": "A React hook for detecting clicks outside of specified elements",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",