Haptic

@bloxwap/haptic adds haptic feedback to a React target without replacing its behavior. Wrap one element and it keeps its handlers, ref, focus, and accessibility, with eleven vibration presets and custom patterns.

Project site · Documentation · GitHub · npm

Install

npm install @bloxwap/haptic

React and React DOM are peer dependencies; use matching versions, React 18 or newer. The package ships ES modules and CommonJS with TypeScript declarations, and renders safely through server rendering.

Add feedback to a control

Wrap a single target with the Haptic component:

'use client';

import { Haptic } from '@bloxwap/haptic';

export function SaveButton() {
  return (
    <Haptic feedback="success">
      <button onClick={() => console.log('Saved')}>Save</button>
    </Haptic>
  );
}

feedback accepts a preset name such as selection, light, heavy, success, or error, a duration in milliseconds, an alternating on/off number[] pattern, or vibration event objects with delay and intensity. The default is selection.

Control feedback

Suppress feedback while leaving the action available:

<Haptic enabled={false}>
  <button onClick={save}>Save without feedback</button>
</Haptic>

Targets with disabled or aria-disabled="true" are detected automatically. The wrapper defaults to inline-grid; pass className and style to control its layout.

Platform behavior

On supported physical iOS devices, a tap uses the native system tick. Vibration-capable browsers play the selected preset or pattern through the Vibration API. On a desktop without vibration hardware, webHapticsOptions={{ debug: true }} enables an opt-in audio preview.

Go further

• API reference — presets, patterns, trigger options, and platform detection.
• GitHub — source, release plan, and device certification status.

Haptic is released under the MIT license.