React hooks for haptic feedback
npm install react-hapticLightweight | 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.
Use your favorite package manager to install:
``bashnpm
npm install react-haptic
Usage
jsx
import React from "react";
import { useHaptic } from "react-haptic";const Component = () => {
const { vibrate } = useHaptic();
const handleClick = () => {
vibrate(); // Trigger haptic feedback
};
return ;
};
`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
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
$3
| Name | Type | Default | Description |
| ------------------------ | ------------------ | ------- | ---------------------------------------------------------------------------------- |
|
options | UseHapticOptions | - | Optional configuration object. |
| options.hapticDuration | number | 100 | The duration (in milliseconds) for the vibration, if the Vibrate API is supported. |#### Return Value
| Name | Type | Description |
| --------- | ------------ | ----------------------------------------------------------------------------- |
|
vibrate | () => void` | A function that triggers haptic feedback (vibration or Taptic-like feedback). |