Haptics TypeScript helper for React
v1.0.0Added in 1.0.0
Haptic feedback for the web in one call: short vibration ticks on Android and the system tick on iPhone, silent everywhere else.
Tap a tile on a phone to feel each kind: a faint selection detent, light, medium and heavy impacts, and the success, warning and error patterns drawn as bars on the tile. Send plays the kind picked in the playground. On a desktop nothing vibrates and the readout says haptic() returned false; turn enabled off to see every call return false on a phone too.
Haptics is a Pro React helper in the React hooks and utilities category, written in TypeScript for React 19. It installs as source with npx wingo-ui@latest add haptics.
Add to a project
Requirements: React 19, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup
npx wingo-ui@latest add hapticsHaptics is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans
Usage
Import haptic from @/lib/haptics.
"use client"
import { haptic } from "@/lib/haptics"
import { Button } from "@/components/ui/button"
export function PayButton({ onPay }: { onPay: () => Promise<void> }) {
return (
<Button
onClick={async () => {
haptic("light")
try {
await onPay()
haptic("success")
} catch {
haptic("error")
}
}}
>
Pay $1,850
</Button>
)
}API
kinddefault"light""selection" | "light" | "medium" | "heavy" | "success" | "warning" | "error"haptic(kind?, options?): the feel. selection for wheel and slider detents, light for taps and toggles, medium for a snap or a crossed threshold, heavy for a committed full swipe or a drop, success / warning / error for outcomes. Returns true when a haptic was sent.
enableddefaulttruebooleanconfigureHaptics({ enabled }): the app-wide switch, e.g. a Vibrations setting. Off, haptic() does nothing unless called with { force: true }.
iosFallbackdefaulttruebooleanconfigureHaptics({ iosFallback }): Safari on iOS has no vibrate, but toggling a native switch input plays the system tick (iOS 17.4+). The lib keeps one hidden, aria-hidden switch at the end of <body> and clicks it; the click never bubbles into the page.
forcebooleanhaptic(kind, { force: true }) plays even when haptics are turned off app-wide (a test button next to the setting).
HAPTIC_PATTERNSRecord<HapticKind, number | number[]>The vibration patterns in ms: selection 4, light 8, medium 14, heavy 22, success [10, 60, 16], warning [16, 70, 16], error [22, 50, 22, 50, 22]. iOS repeats its one tick 1, 2 or 3 times instead.
supportsHaptics() => booleanTrue when this device can play a haptic (vibrate, or an iPhone / iPad with the fallback on). False on the server: call it in an effect or a handler.
getHapticsConfig() => HapticsConfigThe current { enabled, iosFallback }.
Examples
Quantity stepper
Each step plays a light selection tick; pressing past 1 or 6 plays the warning pattern instead.
Dependencies
No dependencies beyond React.
Files
- lib/haptics.ts
FAQ
Is the Haptics helper free?
The preview, props and docs are free; copying the source needs a Pro plan. See plans.
How do I install Haptics?
Run npx wingo-ui@latest add haptics. With shadcn, add the @wingo-ui registry with your API key, then run npx shadcn@latest add @wingo-ui/haptics.
See also
Used in
More React hooks and utilities
Articles using this component
- React Pull to Refresh in a PWA Without Fighting the Browser
Mobile UI in React11 min read
- Web Vibration API: Haptic Feedback on Android and iPhone
Mobile UI in React11 min read