@versini/ui-hooks 5.0.1 → 5.1.0

package/README.md

@@ -45,6 +45,7 @@ npm install @versini/ui-hooks
 
 - **`useClickOutside`** - Detect clicks outside an element
 - **`useHotkeys`** - Handle keyboard shortcuts and hotkeys
+- **`useHaptic`** - Provide haptic feedback for mobile devices
 
 ### Storage Hooks
 
@@ -115,6 +116,42 @@ useHotkeys(
 - `tagsToIgnore`: HTML tags to ignore (default: `["INPUT", "TEXTAREA", "SELECT"]`)
 - `triggerOnContentEditable`: Whether to trigger on contentEditable elements
 
+### useHaptic
+
+Provide haptic feedback for mobile devices using the Vibration API or iOS switch element fallback.
+
+```tsx
+const { haptic } = useHaptic(): { haptic: (count?: number) => void }
+```
+
+**Parameters:**
+
+- `count` (optional): Number of haptic pulses to trigger (default: 1)
+
+**Returns:** Object with `haptic` function to trigger feedback
+
+**Example:**
+
+```tsx
+import { useHaptic } from "@versini/ui-hooks";
+
+function HapticButton() {
+  const { haptic } = useHaptic();
+
+  return (
+    <button onClick={() => haptic(1)}>Tap me (with haptic feedback)</button>
+  );
+}
+```
+
+**Notes:**
+
+- Uses `navigator.vibrate` when available
+- Falls back to iOS switch element trick for Safari on iOS
+- Haptic duration: 50ms per pulse
+- Interval between pulses: 120ms
+- Multiple pulses create a vibration pattern for better UX
+
 ### useLocalStorage
 
 Manage state synchronized with localStorage.
@@ -435,6 +472,46 @@ function ResizablePanel({ children }) {
 }
 ```
 
+### Haptic Feedback for Interactive UI
+
+```tsx
+import { useHaptic } from "@versini/ui-hooks";
+
+function InteractiveCounter() {
+  const [count, setCount] = useState(0);
+  const { haptic } = useHaptic();
+
+  const increment = () => {
+    setCount((c) => c + 1);
+    haptic(1); // Single pulse
+  };
+
+  const decrement = () => {
+    setCount((c) => c - 1);
+    haptic(1); // Single pulse
+  };
+
+  const reset = () => {
+    setCount(0);
+    haptic(2); // Double pulse for emphasis
+  };
+
+  const celebrate = () => {
+    haptic(3); // Triple pulse for celebration
+  };
+
+  return (
+    <div>
+      <h2>Count: {count}</h2>
+      <button onClick={increment}>+</button>
+      <button onClick={decrement}>-</button>
+      <button onClick={reset}>Reset</button>
+      {count >= 10 && <button onClick={celebrate}>🎉 Celebrate!</button>}
+    </div>
+  );
+}
+```
+
 ### Advanced Controlled/Uncontrolled Input
 
 ```tsx

package/dist/hooks/useHaptic.js

@@ -0,0 +1,49 @@
+import { useRef as u, useEffect as d, useCallback as l } from "react";
+const o = 50, s = 120, m = () => {
+  const c = u(null), r = u(null), i = u(/* @__PURE__ */ new Set());
+  d(() => typeof window > "u" ? void 0 : ((() => {
+    if (c.current && r.current)
+      return;
+    const e = document.createElement("input");
+    e.type = "checkbox", e.setAttribute("switch", ""), e.style.display = "none", e.setAttribute("aria-hidden", "true");
+    const t = document.createElement("label");
+    t.style.display = "none", t.setAttribute("aria-hidden", "true"), t.appendChild(e), document.body.appendChild(t), c.current = e, r.current = t;
+  })(), () => {
+    for (const e of i.current)
+      clearTimeout(e);
+    i.current.clear(), r.current && document.body.contains(r.current) && document.body.removeChild(r.current), c.current = null, r.current = null;
+  }), []);
+  const a = l(() => {
+    try {
+      if (navigator?.vibrate) {
+        navigator.vibrate(o);
+        return;
+      }
+      r.current?.click();
+    } catch {
+    }
+  }, []);
+  return { haptic: l(
+    (n = 1) => {
+      if (!(typeof window > "u") && !(n < 1)) {
+        if (navigator?.vibrate && n > 1) {
+          const e = [];
+          for (let t = 0; t < n; t++)
+            e.push(o), t < n - 1 && e.push(s - o);
+          navigator.vibrate(e);
+          return;
+        }
+        for (let e = 0; e < n; e++) {
+          const t = setTimeout(() => {
+            a(), i.current.delete(t);
+          }, e * s);
+          i.current.add(t);
+        }
+      }
+    },
+    [a]
+  ) };
+};
+export {
+  m as useHaptic
+};

package/dist/index.d.ts

@@ -18,6 +18,26 @@ import * as react from 'react';
  */
 declare function useClickOutside<T extends HTMLElement = any>(handler: () => void, events?: string[] | null, nodes?: (HTMLElement | null)[]): react.RefObject<T | null>;
 
+/**
+ * Custom hook providing imperative haptic feedback for mobile devices. Uses
+ * navigator.vibrate when available, falls back to iOS switch element trick
+ * for Safari on iOS devices that don't support the Vibration API.
+ *
+ * @example
+ * ```tsx
+ * const { haptic } = useHaptic();
+ *
+ * // Trigger a single haptic pulse
+ * haptic(1);
+ *
+ * // Trigger two rapid haptic pulses
+ * haptic(2);
+ * ```
+ */
+declare const useHaptic: () => {
+    haptic: (count?: number) => void;
+};
+
 interface HotkeyItemOptions {
     preventDefault?: boolean;
 }
@@ -223,4 +243,4 @@ declare function useVisualViewportSize(): {
     height: number;
 };
 
-export { type HotkeyItem, type HotkeyItemOptions, type StorageProperties, type UseUniqueIdOptions, getHotkeyHandler, shouldFireEvent, useClickOutside, useHotkeys, useInViewport, useInterval, useIsMounted, useLocalStorage, useMergeRefs, useResizeObserver, useUncontrolled, useUniqueId, useViewportSize, useVisualViewportSize };
+export { type HotkeyItem, type HotkeyItemOptions, type StorageProperties, type UseUniqueIdOptions, getHotkeyHandler, shouldFireEvent, useClickOutside, useHaptic, useHotkeys, useInViewport, useInterval, useIsMounted, useLocalStorage, useMergeRefs, useResizeObserver, useUncontrolled, useUniqueId, useViewportSize, useVisualViewportSize };

package/dist/index.js

@@ -1,32 +1,34 @@
 import { useClickOutside as r } from "./hooks/useClickOutside.js";
-import { getHotkeyHandler as s, shouldFireEvent as u, useHotkeys as p } from "./hooks/useHotkeys.js";
-import { useInterval as m } from "./hooks/useInterval.js";
-import { useInViewport as i } from "./hooks/useInViewport.js";
-import { useIsMounted as n } from "./hooks/useIsMounted.js";
-import { useLocalStorage as a } from "./hooks/useLocalStorage.js";
+import { useHaptic as s } from "./hooks/useHaptic.js";
+import { getHotkeyHandler as p, shouldFireEvent as f, useHotkeys as m } from "./hooks/useHotkeys.js";
+import { useInterval as i } from "./hooks/useInterval.js";
+import { useInViewport as n } from "./hooks/useInViewport.js";
+import { useIsMounted as d } from "./hooks/useIsMounted.js";
+import { useLocalStorage as H } from "./hooks/useLocalStorage.js";
 import { useMergeRefs as V } from "./hooks/useMergeRefs.js";
-import { useResizeObserver as g } from "./hooks/useResizeObserver.js";
-import { useUncontrolled as v } from "./hooks/useUncontrolled.js";
-import { useUniqueId as z } from "./hooks/useUniqueId.js";
-import { useViewportSize as S } from "./hooks/useViewportSize.js";
-import { useVisualViewportSize as M } from "./hooks/useVisualViewportSize.js";
+import { useResizeObserver as k } from "./hooks/useResizeObserver.js";
+import { useUncontrolled as w } from "./hooks/useUncontrolled.js";
+import { useUniqueId as S } from "./hooks/useUniqueId.js";
+import { useViewportSize as M } from "./hooks/useViewportSize.js";
+import { useVisualViewportSize as R } from "./hooks/useVisualViewportSize.js";
 /*!
-  @versini/ui-hooks v5.0.1
+  @versini/ui-hooks v5.1.0
   © 2025 gizmette.com
 */
 export {
-  s as getHotkeyHandler,
-  u as shouldFireEvent,
+  p as getHotkeyHandler,
+  f as shouldFireEvent,
   r as useClickOutside,
-  p as useHotkeys,
-  i as useInViewport,
-  m as useInterval,
-  n as useIsMounted,
-  a as useLocalStorage,
+  s as useHaptic,
+  m as useHotkeys,
+  n as useInViewport,
+  i as useInterval,
+  d as useIsMounted,
+  H as useLocalStorage,
   V as useMergeRefs,
-  g as useResizeObserver,
-  v as useUncontrolled,
-  z as useUniqueId,
-  S as useViewportSize,
-  M as useVisualViewportSize
+  k as useResizeObserver,
+  w as useUncontrolled,
+  S as useUniqueId,
+  M as useViewportSize,
+  R as useVisualViewportSize
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-hooks",
-	"version": "5.0.1",
+	"version": "5.1.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -36,9 +36,5 @@
 		"test:watch": "vitest",
 		"test": "vitest run"
 	},
-	"peerDependencies": {
-		"react": "^19.1.0",
-		"react-dom": "^19.1.0"
-	},
-	"gitHead": "dcc216644c8c3e7d43a49ea655a22aed21fa4b83"
+	"gitHead": "e2e7b5c53c77d1773d7e0e463bac2a75b936a0d3"
 }