Haptic Feedback

1const isTouchDevice =
2  typeof window !== "undefined"
3    ? window.matchMedia("(pointer: coarse)").matches
4    : false
5 
6/**
7 * Trigger haptic feedback on mobile devices.
8 * Uses Vibration API on Android/modern browsers, and iOS checkbox trick on iOS.
9 *
10 * @param pattern - Vibration duration (ms) or pattern.
11 * Custom patterns only work on Android devices. iOS uses fixed feedback.
12 * See [Vibration API](https://developer.mozilla.org/docs/Web/API/Vibration_API)
13 *
14 * @example
15 * import { haptic } from "@/lib/haptic"
16 *
17 * <Button onClick={() => haptic()}>Haptic</Button>
18 */
19export function haptic(pattern: number | number[] = 50) {
20  try {
21    if (!isTouchDevice) return
22 
23    if ("vibrate" in navigator) {
24      navigator.vibrate(pattern)
25      return
26    }
27 
28    // iOS haptic trick via checkbox switch element
29    const label = document.createElement("label")
30    label.ariaHidden = "true"
31    label.style.display = "none"
32 
33    const input = document.createElement("input")
34    input.type = "checkbox"
35    input.setAttribute("switch", "")
36    label.appendChild(input)
37 
38    try {
39      document.head.appendChild(label)
40      label.click()
41    } finally {
42      document.head.removeChild(label)
43    }
44  } catch {}
45}