Examples

Real-world usage patterns for ios-haptics.

Button with haptic feedback

Vanilla JS

import { haptic } from 'ios-haptics'

const button = document.querySelector('#my-button')

button.addEventListener('click', () => {
  haptic()
})

React

import { haptic } from 'ios-haptics'

export function HapticButton() {
  return (
    <button onClick={() => haptic()}>
      Tap me
    </button>
  )
}

Form submission

Use 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'
}

In React:

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')
  }
})