Complete TypeScript type definitions for the WebHaptics library.
Vibration
Defines a single vibration segment with duration, intensity, and optional delay.
interface Vibration {
duration: number
intensity?: number
delay?: number
}
Duration of the vibration in milliseconds. Must be a finite non-negative number.Maximum: 1000ms (browser haptic window limit)
Intensity of the vibration, from 0 to 1.
0 - No vibration (silent)0.5 - Medium intensity1 - Full intensity
Uses PWM (pulse-width modulation) to simulate intensity on devices without native intensity support. Optional delay before this vibration starts, in milliseconds. Must be a finite non-negative number.
Example
const vibration: Vibration = {
duration: 50,
intensity: 0.8,
delay: 100
}
HapticPattern
A haptic pattern can be either a simple number array or an array of Vibration objects.
type HapticPattern = number[] | Vibration[]
const pattern: HapticPattern = [50, 100, 50, 100, 50]
// Vibrates for 50ms, pauses 100ms, vibrates 50ms, pauses 100ms, vibrates 50ms
const pattern: HapticPattern = [
{ duration: 30, intensity: 0.5 },
{ delay: 60, duration: 40, intensity: 1 }
]
HapticPreset
Defines a reusable haptic preset with a pattern.
interface HapticPreset {
pattern: Vibration[]
}
Array of Vibration objects defining the haptic pattern
Example
const customPreset: HapticPreset = {
pattern: [
{ duration: 40, intensity: 0.9 },
{ delay: 40, duration: 40, intensity: 0.9 },
{ delay: 40, duration: 40, intensity: 0.9 }
]
}
await haptics.trigger(customPreset)
type HapticInput = number | string | HapticPattern | HapticPreset
Number
String
Number Array
Vibration Array
Preset Object
Single vibration duration:await haptics.trigger(100)
Preset name:await haptics.trigger('success')
Alternating on/off pattern:await haptics.trigger([50, 100, 50])
Full control pattern:await haptics.trigger([
{ duration: 30, intensity: 0.5 },
{ delay: 60, duration: 40, intensity: 1 }
])
Custom preset object:const preset: HapticPreset = {
pattern: [{ duration: 50, intensity: 0.7 }]
}
await haptics.trigger(preset)
TriggerOptions
Options for the trigger() method.
interface TriggerOptions {
intensity?: number
}
Default intensity for all vibrations in the pattern (0-1).Individual Vibration objects can override this with their own intensity property.
Example
// All vibrations will use 0.8 intensity by default
await haptics.trigger('success', { intensity: 0.8 })
// Override default intensity for specific vibrations
await haptics.trigger(
[
{ duration: 30 }, // Uses default 0.8
{ duration: 40, intensity: 1 } // Overrides to 1.0
],
{ intensity: 0.8 }
)
WebHapticsOptions
Configuration options for the WebHaptics constructor.
interface WebHapticsOptions {
debug?: boolean
showSwitch?: boolean
}
Enable debug mode with audio feedback and visual indicators.When enabled:
- Audio click sounds play with each vibration
- Visual feedback is shown on screen
- Console logging is enabled
- Audio frequency varies with intensity (2000-4000 Hz)
Show the haptic feedback toggle switch in the bottom-left corner.The switch allows users to enable/disable haptic feedback at runtime.
Example
const haptics = new WebHaptics({
debug: true,
showSwitch: true
})
Type Guards
You can use type guards to check input types:
function isVibration(input: any): input is Vibration {
return (
typeof input === 'object' &&
input !== null &&
'duration' in input &&
typeof input.duration === 'number'
)
}
function isHapticPreset(input: any): input is HapticPreset {
return (
typeof input === 'object' &&
input !== null &&
'pattern' in input &&
Array.isArray(input.pattern)
)
}
Additional Exports
version
The current version of the library.
import { version } from 'web-haptics'
console.log(version) // "0.0.6"
Import Paths
// Core library
import { WebHaptics, defaultPatterns, version } from 'web-haptics'
import type {
Vibration,
HapticPattern,
HapticPreset,
HapticInput,
TriggerOptions,
WebHapticsOptions
} from 'web-haptics'
// React
import { useWebHaptics } from 'web-haptics/react'
// Vue
import { useWebHaptics } from 'web-haptics/vue'
// Svelte
import { createWebHaptics } from 'web-haptics/svelte'