Documentation Index
Fetch the complete documentation index at: https://mintlify.com/tijnjh/ios-haptics/llms.txt
Use this file to discover all available pages before exploring further.
import { haptic } from 'ios-haptics'
const button = document.querySelector('#my-button')
button.addEventListener('click', () => {
haptic()
})
import { haptic } from 'ios-haptics'
export function HapticButton() {
return (
<button onClick={() => haptic()}>
Tap me
</button>
)
}
haptic.confirm() on successful submission and haptic.error() when validation fails.
import { haptic } from 'ios-haptics'
const form = document.querySelector('#signup-form')
form.addEventListener('submit', async (event) => {
event.preventDefault()
const isValid = validate(form)
if (!isValid) {
haptic.error()
showErrors(form)
return
}
try {
await submitForm(new FormData(form))
haptic.confirm()
showSuccessMessage()
} catch {
haptic.error()
showErrorMessage()
}
})
React example
A React component that fires haptics based on the outcome of an async operation.
import { useState } from 'react'
import { haptic } from 'ios-haptics'
export function SaveButton() {
const [status, setStatus] = useState<'idle' | 'saving' | 'done' | 'error'>('idle')
async function handleClick() {
setStatus('saving')
haptic()
try {
await saveData()
setStatus('done')
haptic.confirm()
} catch {
setStatus('error')
haptic.error()
}
}
return (
<button onClick={handleClick} disabled={status === 'saving'}>
{status === 'saving' ? 'Saving…' : 'Save'}
</button>
)
}
Conditional haptic UI
Use supportsHaptics to render a UI hint only on devices that will actually fire haptics.
import { haptic, supportsHaptics } from 'ios-haptics'
const hint = document.querySelector('#haptic-hint')
if (supportsHaptics) {
hint.style.display = 'block'
hint.textContent = 'Tap the button to feel haptic feedback'
} else {
hint.style.display = 'none'
}
import { supportsHaptics } from 'ios-haptics'
export function HapticHint() {
if (!supportsHaptics) return null
return <p>Tap the button to feel haptic feedback.</p>
}
Swipe gesture
Call haptic() inside a touch event handler to add tactile feedback to swipe interactions.
import { haptic } from 'ios-haptics'
const card = document.querySelector('#swipeable-card')
let startX = 0
card.addEventListener('touchstart', (event) => {
startX = event.touches[0].clientX
})
card.addEventListener('touchend', (event) => {
const endX = event.changedTouches[0].clientX
const deltaX = endX - startX
if (Math.abs(deltaX) > 50) {
haptic()
handleSwipe(deltaX > 0 ? 'right' : 'left')
}
})