Haptic

Haptic feedback for React on iOS, Android, and the web.

Install

npm install joeblau/haptic

Use

import { Haptic } from "@joeblau/haptic"

export function Button() {
  return (
    <Haptic>
      <button onClick={() => console.log("Tapped")}>Tap me</button>
    </Haptic>
  )
}

The original element keeps its handlers, ref, focus behavior, and accessibility attributes.

Options

<Haptic
  enabled={true}
  feedback="selection"
  style={{ display: "grid", width: "100%" }}
>
  <button>Continue</button>
</Haptic>

• enabled turns haptics on or off.
• disabled disables haptics for the target.
• feedback selects a web-haptics preset or pattern.
• style and className customize the wrapper.

Disabled buttons are detected automatically.

iOS

iOS haptics require a physical tap. Programmatic events, timers, and asynchronous callbacks cannot trigger them.