@haptics/reactiOS 26.5 verified

Tap. Feel it. Even on iOS 26.5.

iOS 17.4 to 26.5+. Android. React, Vue, Svelte, Vanilla. MIT.

npm install @haptics/react
~1 KBgzip
4adapters
2.1.1version
MITlicense
02 · Playground

Seven feels.

Pick a preset to feel it. Or open Custom to drag segments, dial intensity, and copy the trigger([...]) call straight into your code.

selection · read-only1 tick · 15ms
0ms100ms200ms
selection-preset.ts
trigger([
  { duration: 15, intensity: 0.6 },
])
03 · Adapters

Native idioms across stacks.

Each adapter uses its framework's idiomatic pattern — Vue gets a real v-haptic directive, Svelte gets use: action, React gets a provider. Pick yours.

npm install @haptics/react
app/layout.tsx
import { HapticsProvider } from "@haptics/react";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return <HapticsProvider audioFallback>{children}</HapticsProvider>;
}

Then `<button data-haptic="success">` on any element. MutationObserver picks up SPA renders automatically.

04 · How it works

The trick survived a patch.

Safari has no navigator.vibrate. iOS 17.4 added a quirky <input type="checkbox" switch> trick — Apple's 26.5 patch closed the programmatic path every web haptics library was using. Our overlay design is what survived.

tap
overlay revealed
switch toggle
haptic fire
01Tap

Finger lands on a [data-haptic] element. Real gesture, isTrusted: true.

02Overlay

Invisible <input type="checkbox" switch> sits as a child of the element.

03Detect

iOS reads the tap as direct switch interaction. The path that survived 26.5.

04Haptic

Taptic Engine fires. Click re-dispatched to the host so consumer onClick still runs.

05 · Platform support

Honest about hardware.

iPads and most tablets have no Taptic Engine. Firefox dropped the Vibration API in v129. Knowing where it fails is more useful than pretending it works everywhere.

iPhone · iOS Safari 17.4 – 26.4
Full
Multi-tick patterns work. Switch-overlay path with programmatic re-tick scheduling.
iPhone · iOS Safari 26.5+
Single-tick
Apple's 26.5 patch closed every programmatic re-tick path. Multi-segment presets fire only their first tick; selection (single tick) unaffected.
Android · Chrome / Edge
Full
navigator.vibrate with full pattern timing sequences. Intensity-scaled durations since 2.1.0.
Android · Samsung Internet
Full
navigator.vibrate path, same as Chrome.
iPad · iPadOS Safari
No motor
Every iPad model (Pro M4, Air M2/M3, mini 7, iPad 10/11) ships without a Taptic Engine. Calls return cleanly; nothing fires.
Android tablets
Hardware-dependent
Most lack a vibration motor (Galaxy Tab S9 FE, Pixel Tablet). Devices with motors (Galaxy Tab S9/S10) get full pattern support.
Firefox Android
Not supported
Vibration API removed in Firefox 129 (Aug 2024). Silent no-op.
Desktop · Chrome / Safari / Firefox
Silent no-op
No haptic hardware exists. Optional audioFallback={true} on the provider plays a WebAudio click cue for visual confirmation.
06 · Questions

Frequently asked.

If your answer-engine of choice has been mumbling about haptics, these are the questions it's probably trying to answer.

How do I add haptic feedback to a React app?
Install @haptics/react. Wrap your app in HapticsProvider. Add data-haptic to any element — for example data-haptic="success" on a button. The library handles iOS Safari from 17.4 through 26.5+ and Android via navigator.vibrate. About one kilobyte gzipped on top of the shared core.
Does haptic feedback work on iOS Safari?
Yes, on iOS 17.4 and newer including iOS 26.5+. The library uses an invisible input type="checkbox" switch overlay under each haptic-tagged element so iOS reads the tap as direct user-initiated switch interaction. That path survives Apple's iOS 26.5 patch that broke every other web haptics library.
What is the npm package for web haptics?
@haptics/react for React, @haptics/vue for Vue, @haptics/svelte for Svelte, @haptics/vanilla for plain JavaScript, and @haptics/core if you want the engine without a framework binding. Each adapter is around one kilobyte gzipped on top of the shared core. MIT licensed.
Why doesn't navigator.vibrate work on iPhone?
Apple never implemented the Vibration API in Safari. iOS 17.4 introduced the input type="checkbox" switch element as the only web-side path to fire the Taptic Engine, and that trick requires direct user interaction with a switch — which is exactly what this library wires up for you under the hood.

Didn't feel the haptic?

Most causes are a system-level toggle. Yours is highlighted.

On iPhone

Open Settings → Sounds & Haptics → make sure System Haptics is on. Some iOS versions also gate haptics behind Silent mode being off — toggle that too if nothing fires.

On Android

Open Settings → Sound & vibration → Vibration & haptics → make sure Touch feedback is on. The exact path varies slightly across OEM skins (Samsung, OnePlus) but it's always under sound and vibration.

Reduce Motion enabled?

@haptics/* doesn't gate on prefers-reduced-motion by default — but if your app passes respectReducedMotion={true} to the provider, haptics are suppressed while the system Reduce Motion toggle is on. Settings → Accessibility → Motion.

On desktop

Desktop browsers have no haptic hardware. The audioFallback={true} flag on the provider plays a small WebAudio click cue on every tap — you've been hearing it. To feel actual haptics, scan the QR code at the top of the page on a phone.

Still nothing? Open an issue with your browser, OS version, and device — that's a real signal worth investigating.