React hook that manages a WebHaptics instance with automatic lifecycle handling.
Usage
import { useWebHaptics } from 'web-haptics/react'
function MyComponent() {
const { trigger, cancel, isSupported } = useWebHaptics(options?)
// Use trigger, cancel, and isSupported...
}
Parameters
Optional configuration objectEnable debug mode with audio feedback and visual indicators
Show the haptic feedback toggle switch in the UI
Return Value
Returns an object with the following properties:
trigger
(input?: HapticInput, options?: TriggerOptions) => Promise<void> | undefined
Function to trigger a haptic vibration pattern
input - The haptic pattern (number, string preset, array, or object)options - Optional trigger configuration with intensity property- Returns a promise that resolves when the pattern completes
Function to cancel any currently running haptic pattern
Whether haptic feedback is supported in the current browser
Examples
Basic Usage
import { useWebHaptics } from 'web-haptics/react'
function MyButton() {
const { trigger, isSupported } = useWebHaptics()
const handleClick = async () => {
if (isSupported) {
await trigger('light')
}
}
return <button onClick={handleClick}>Click me</button>
}
With Debug Mode
function App() {
const { trigger } = useWebHaptics({ debug: true })
return (
<button onClick={() => trigger('success')}>
Trigger Success
</button>
)
}
Custom Patterns
function CustomHaptics() {
const { trigger, cancel } = useWebHaptics()
const playCustomPattern = async () => {
await trigger([
{ duration: 30, intensity: 0.5 },
{ delay: 60, duration: 40, intensity: 1 }
], { intensity: 0.7 })
}
return (
<>
<button onClick={playCustomPattern}>Play Pattern</button>
<button onClick={cancel}>Stop</button>
</>
)
}
Dynamic Options
function SettingsPanel() {
const [debugMode, setDebugMode] = useState(false)
const { trigger } = useWebHaptics({ debug: debugMode })
// The hook automatically updates when options change
return (
<div>
<label>
<input
type="checkbox"
checked={debugMode}
onChange={e => setDebugMode(e.target.checked)}
/>
Debug Mode
</label>
<button onClick={() => trigger('medium')}>Test</button>
</div>
)
}
Lifecycle Management
The hook automatically:
- Creates a WebHaptics instance on mount
- Destroys the instance on unmount
- Updates
debug and showSwitch settings when options change
You don’t need to manually call destroy() - the hook handles cleanup for you.
Vue Usage
Vue also uses useWebHaptics with similar API:
<script setup>
import { useWebHaptics } from 'web-haptics/vue'
const { trigger, isSupported } = useWebHaptics()
const handleClick = async () => {
await trigger('success')
}
</script>
<template>
<button @click="handleClick" :disabled="!isSupported">
Click me
</button>
</template>
Type Definitions
See Types for complete type definitions.