Get started

Haptic 0.1.0 adds feedback to your React interface while preserving the original target. See the release evidence and platform certification status.

InstallCopy Anchor Link

npm install @bloxwap/haptic

React and React DOM are peers. Use matching versions, React 18 or newer. The package provides ESM, CommonJS, and TypeScript declarations.

Wrap one targetCopy Anchor Link

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

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

Your element keeps its handlers, ref, focus, and accessibility attributes. The wrapper defaults to inline-grid; className and style control its layout.

Device behaviorCopy Anchor Link

On supported physical iOS devices, tapping the target uses the system tick. Vibration-capable browsers use the selected preset or pattern. On a desktop without vibration hardware, webHapticsOptions={{ debug: true }} enables the dependency's audio preview.

Physical feedback depends on device support and settings. The platform guide separates interaction tests from physical-device certification.

Disable feedbackCopy Anchor Link

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

Disabling feedback leaves the original action available. A target with disabled or aria-disabled="true" does not request feedback.

Next.jsCopy Anchor Link

Put interactive examples in a client component with 'use client'. The published build preserves its client boundary and still renders safely through React server rendering. Platform detection resolves after mounting to keep initial markup compatible with hydration.