add double-click trigger (#148)

mohsinulhaq · Jun 5, 2022 · c4d6d83 · c4d6d83
1 parent 4c1c915
commit c4d6d83
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 4 deletions.
diff --git a/.size-snapshot.json b/.size-snapshot.json
@@ -1,8 +1,8 @@
 {
   "react-popper-tooltip.js": {
-    "bundled": 11114,
-    "minified": 5318,
-    "gzipped": 1793,
+    "bundled": 11456,
+    "minified": 5482,
+    "gzipped": 1813,
     "treeshaked": {
       "rollup": {
         "code": 142,

diff --git a/src/types.ts b/src/types.ts
@@ -1,7 +1,12 @@
 import * as React from 'react';
 import * as PopperJS from '@popperjs/core';
 
-export type TriggerType = 'click' | 'right-click' | 'hover' | 'focus';
+export type TriggerType =
+  | 'click'
+  | 'double-click'
+  | 'right-click'
+  | 'hover'
+  | 'focus';
 
 export type Config = {
   /**

diff --git a/src/usePopperTooltip.ts b/src/usePopperTooltip.ts
@@ -152,6 +152,15 @@ export function usePopperTooltip(
     return () => triggerRef.removeEventListener('click', toggleTooltip);
   }, [triggerRef, isTriggeredBy, toggleTooltip]);
 
+  // Trigger: double-click
+  React.useEffect(() => {
+    if (triggerRef == null || !isTriggeredBy('double-click')) return;
+
+    triggerRef.addEventListener('dblclick', toggleTooltip);
+
+    return () => triggerRef.removeEventListener('dblclick', toggleTooltip);
+  }, [triggerRef, isTriggeredBy, toggleTooltip]);
+
   // Trigger: right-click
   React.useEffect(() => {
     if (triggerRef == null || !isTriggeredBy('right-click')) return;