diff --git a/.all-contributorsrc b/.all-contributorsrc
index 823c8712..cbac07ae 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -1740,6 +1740,13 @@
"avatar_url": "https://avatars.githubusercontent.com/u/7185045?v=4",
"profile": "https://github.com/pookmish",
"contributions": ["ideas"]
+ },
+ {
+ "login": "metav-drimz",
+ "name": "metav-drimz",
+ "avatar_url": "https://avatars.githubusercontent.com/u/113976282?v=4",
+ "profile": "https://github.com/metav-drimz",
+ "contributions": ["ideas"]
}
],
"contributorsPerLine": 7,
diff --git a/.changeset/poor-forks-end.md b/.changeset/poor-forks-end.md
new file mode 100644
index 00000000..4daa90b2
--- /dev/null
+++ b/.changeset/poor-forks-end.md
@@ -0,0 +1,5 @@
+---
+"usehooks-ts": patch
+---
+
+Expose `AddEventListenerOptions` in `useOnClickOutside` (Fixes #554 from @metav-drimz)
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
index af50b5a1..2e493cc1 100644
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -423,6 +423,7 @@ Big thanks go to all our contributors! [[Become a contributor](https://github.co
Igor Sukharev
🐛 |
pookmish
🤔 |
+ 
metav-drimz
🤔 |
diff --git a/README.md b/README.md
index 22fc0e1a..19e363ce 100644
--- a/README.md
+++ b/README.md
@@ -17,7 +17,7 @@
[](https://github.com/juliencrn/usehooks-ts/blob/master/LICENSE)
-[](#contributors-)
+[](#contributors-)
@@ -435,6 +435,7 @@ Big thanks go to all our contributors! [[Become a contributor](https://github.co
Igor Sukharev
🐛 |
pookmish
🤔 |
+
metav-drimz
🤔 |
diff --git a/packages/usehooks-ts/README.md b/packages/usehooks-ts/README.md
index 22fc0e1a..19e363ce 100644
--- a/packages/usehooks-ts/README.md
+++ b/packages/usehooks-ts/README.md
@@ -17,7 +17,7 @@
[](https://github.com/juliencrn/usehooks-ts/blob/master/LICENSE)
-[](#contributors-)
+[](#contributors-)
@@ -435,6 +435,7 @@ Big thanks go to all our contributors! [[Become a contributor](https://github.co
Igor Sukharev
🐛 |
pookmish
🤔 |
+
metav-drimz
🤔 |
diff --git a/packages/usehooks-ts/src/useOnClickOutside/useOnClickOutside.ts b/packages/usehooks-ts/src/useOnClickOutside/useOnClickOutside.ts
index 9d009ae0..a0372d57 100644
--- a/packages/usehooks-ts/src/useOnClickOutside/useOnClickOutside.ts
+++ b/packages/usehooks-ts/src/useOnClickOutside/useOnClickOutside.ts
@@ -17,6 +17,7 @@ type EventType =
* @param {RefObject | RefObject[]} ref - The React ref object(s) representing the element(s) to watch for outside clicks.
* @param {(event: MouseEvent | TouchEvent | FocusEvent) => void} handler - The callback function to be executed when a click outside the element occurs.
* @param {EventType} [eventType] - The mouse event type to listen for (optional, default is 'mousedown').
+ * @param {?AddEventListenerOptions} [eventListenerOptions] - The options object to be passed to the `addEventListener` method (optional).
* @returns {void}
* @public
* @see [Documentation](https://usehooks-ts.com/react-hook/use-on-click-outside)
@@ -32,23 +33,29 @@ export function useOnClickOutside(
ref: RefObject | RefObject[],
handler: (event: MouseEvent | TouchEvent | FocusEvent) => void,
eventType: EventType = 'mousedown',
+ eventListenerOptions: AddEventListenerOptions = {},
): void {
- useEventListener(eventType, event => {
- const target = event.target as Node
+ useEventListener(
+ eventType,
+ event => {
+ const target = event.target as Node
- // Do nothing if the target is not connected element with document
- if (!target || !target.isConnected) {
- return
- }
+ // Do nothing if the target is not connected element with document
+ if (!target || !target.isConnected) {
+ return
+ }
- const isOutside = Array.isArray(ref)
- ? ref
- .filter(r => Boolean(r.current))
- .every(r => r.current && !r.current.contains(target))
- : ref.current && !ref.current.contains(target)
+ const isOutside = Array.isArray(ref)
+ ? ref
+ .filter(r => Boolean(r.current))
+ .every(r => r.current && !r.current.contains(target))
+ : ref.current && !ref.current.contains(target)
- if (isOutside) {
- handler(event)
- }
- })
+ if (isOutside) {
+ handler(event)
+ }
+ },
+ undefined,
+ eventListenerOptions,
+ )
}