react-haptic

Lightweight | Cross-Platform | iOS-Like Haptics

A lightweight React Hook that mimics iOS-style haptic feedback. On devices supporting the Vibrate API, it directly triggers vibration. On iOS devices—where navigator.vibrate is generally unavailable—it leverages a hidden switch trick to produce Taptic-like feedback, similar to native iOS haptic interactions.

Install

Use your favorite package manager to install:

# npm
npm install react-haptic

# yarn
yarn add react-haptic

# pnpm
pnpm add react-haptic

Usage

import React from "react";
import { useHaptic } from "react-haptic";

const ExampleComponent = () => {
  const { vibrate } = useHaptic();

  const handleClick = () => {
    vibrate(); // Trigger haptic feedback
  };

  return <button onClick={handleClick}>Click for Haptic</button>;
};

export default ExampleComponent;

How It Works

1. iOS devices Falls back to clicking a hidden switch element, which can trigger Taptic feedback in many iOS browsers.

2. Non-iOS devices If navigator.vibrate is available, the device vibrates for the specified duration (default: 100ms).

Note iOS 16+ provides an experimental “Haptics API” behind a Safari flag. Until it's widely enabled, this library uses the hidden switch trick as a workaround.

API

useHaptic(options?: UseHapticOptions)

Return Value

License

MIT