Svelte function that creates and returns a WebHaptics instance with helper methods.
Usage
import { createWebHaptics } from 'web-haptics/svelte'
const haptics = createWebHaptics(options?)
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
Function to clean up the WebHaptics instance
Function to enable or disable debug mode
Whether haptic feedback is supported in the current browser
Examples
Basic Usage
<script>
import { createWebHaptics } from 'web-haptics/svelte'
const { trigger, isSupported } = createWebHaptics()
async function handleClick() {
await trigger('light')
}
</script>
<button on:click={handleClick} disabled={!isSupported}>
Click me
</button>
With Cleanup
<script>
import { onDestroy } from 'svelte'
import { createWebHaptics } from 'web-haptics/svelte'
const { trigger, destroy } = createWebHaptics({ debug: true })
// Clean up on component unmount
onDestroy(() => {
destroy()
})
function handleSuccess() {
trigger('success')
}
</script>
<button on:click={handleSuccess}>
Trigger Success
</button>
Dynamic Debug Mode
<script>
import { createWebHaptics } from 'web-haptics/svelte'
let debugMode = false
const { trigger, setDebug } = createWebHaptics()
function toggleDebug() {
debugMode = !debugMode
setDebug(debugMode)
}
</script>
<label>
<input type="checkbox" bind:checked={debugMode} on:change={toggleDebug} />
Debug Mode
</label>
<button on:click={() => trigger('medium')}>
Test Haptic
</button>
Custom Patterns
<script>
import { createWebHaptics } from 'web-haptics/svelte'
const { trigger, cancel } = createWebHaptics()
async function playCustom() {
await trigger([
{ duration: 30, intensity: 0.5 },
{ delay: 60, duration: 40, intensity: 1 }
], { intensity: 0.8 })
}
</script>
<button on:click={playCustom}>Play Pattern</button>
<button on:click={cancel}>Stop</button>
Long-Running Pattern
<script>
import { createWebHaptics } from 'web-haptics/svelte'
const { trigger, cancel } = createWebHaptics()
let isPlaying = false
async function playBuzz() {
isPlaying = true
await trigger('buzz') // 1000ms duration
isPlaying = false
}
function stopBuzz() {
cancel()
isPlaying = false
}
</script>
<button on:click={playBuzz} disabled={isPlaying}>
Play Buzz
</button>
<button on:click={stopBuzz} disabled={!isPlaying}>
Stop
</button>
Lifecycle Management
Unlike React and Vue hooks, createWebHaptics does not automatically destroy the instance. You must call destroy() manually when you’re done:
<script>
import { onDestroy } from 'svelte'
import { createWebHaptics } from 'web-haptics/svelte'
const haptics = createWebHaptics()
onDestroy(() => {
haptics.destroy()
})
</script>
Vue Usage
Vue uses useWebHaptics instead, which provides automatic lifecycle management:
import { useWebHaptics } from 'web-haptics/vue'
const { trigger, cancel, isSupported } = useWebHaptics()
Type Definitions
See Types for complete type definitions.