Quick Start
This guide will walk you through creating your first haptic feedback interaction with WebHaptics.
Basic Usage
Import the hook or function
Import the appropriate hook for your framework:import { useWebHaptics } from 'web-haptics/react';
Initialize WebHaptics
Create an instance or use the hook in your component:function MyComponent() {
const { trigger, isSupported } = useWebHaptics();
// ...
}
Trigger haptic feedback
Call trigger() with a preset name or custom pattern:<button onClick={() => trigger('success')}>
Submit
</button>
Using Built-in Presets
WebHaptics includes 11 pre-configured haptic patterns. Here’s how to use them:
import { useWebHaptics } from 'web-haptics/react';
function NotificationExample() {
const { trigger } = useWebHaptics();
return (
<div>
<button onClick={() => trigger('success')}>
Success
</button>
<button onClick={() => trigger('warning')}>
Warning
</button>
<button onClick={() => trigger('error')}>
Error
</button>
</div>
);
}
Available Presets
| Preset | Description | Use Case |
|---|
success | Ascending double-tap | Successful operations |
warning | Two taps with hesitation | Warning messages |
error | Three rapid harsh taps | Error states |
light | Single light tap | Minor interactions |
medium | Moderate tap | Standard interactions |
heavy | Strong tap | Significant actions |
soft | Soft, cushioned tap | Gentle feedback |
rigid | Hard, crisp tap | Precise actions |
selection | Subtle tap | Selection changes |
nudge | Two quick taps with pause | Reminders |
buzz | Continuous vibration | Alerts |
Custom Patterns
Create your own haptic patterns for unique interactions:
import { useWebHaptics } from 'web-haptics/react';
function CustomPattern() {
const { trigger } = useWebHaptics();
const customPattern = [
{ duration: 30, intensity: 0.5 },
{ delay: 60, duration: 40, intensity: 1 },
{ delay: 80, duration: 20, intensity: 0.3 }
];
return (
<button onClick={() => trigger(customPattern)}>
Custom Feedback
</button>
);
}
Pattern durations are in milliseconds. Intensity ranges from 0 (off) to 1 (maximum).
Adjusting Intensity
Control the overall intensity of any haptic pattern:
// Subtle success feedback
trigger('success', { intensity: 0.3 });
// Strong error feedback
trigger('error', { intensity: 1 });
Checking Support
Always check if haptics are supported before showing UI that depends on it:
import { useWebHaptics } from 'web-haptics/react';
function App() {
const { trigger, isSupported } = useWebHaptics();
return (
<div>
{isSupported ? (
<button onClick={() => trigger('medium')}>
Tap for feedback
</button>
) : (
<p>Haptics not available on this device</p>
)}
</div>
);
}
Debug Mode
Enable debug mode to test haptics on desktop browsers with visual and audio feedback:
const { trigger } = useWebHaptics({ debug: true });
Debug mode adds audio feedback that simulates the haptic patterns, making it easier to develop and test on desktop.
Complete Example
Here’s a full form example with haptic feedback:
import { useWebHaptics } from 'web-haptics/react';
import { useState } from 'react';
function LoginForm() {
const { trigger } = useWebHaptics();
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const handleSubmit = async (e) => {
e.preventDefault();
trigger('light'); // Immediate feedback
try {
await login(email, password);
trigger('success');
} catch (error) {
trigger('error');
}
};
return (
<form onSubmit={handleSubmit}>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
onFocus={() => trigger('selection')}
/>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
onFocus={() => trigger('selection')}
/>
<button type="submit">Login</button>
</form>
);
}
Next Steps
API Reference
Explore all available methods and types
Framework Guides
View framework-specific guides
Presets
Learn about built-in patterns
Custom Patterns
Create advanced haptic patterns