useVibrate

Provide declarative haptic feedback using the browser Vibration API.

Vibration API not supported

This feature requires a physical mobile device with vibration hardware.

Usage

import { useVibrate } from 'usehooks-ts'
 
export default function VibrateButton() {
  const { isSupported, vibrate, stop } = useVibrate()
 
  if (!isSupported) return <p>Haptics not supported</p>
 
  return (
    <>
      <button onClick={() => vibrate(200)}>Blip</button>
      <button onClick={() => vibrate([100, 30, 100])}>Double Tap</button>
      <button onClick={stop}>Stop</button>
    </>
  )
}

API

const { isSupported, vibrate, stop } = useVibrate()

Return Values

NameTypeDescription
isSupportedbooleantrue if browser supports Vibration API
vibrate(pattern) => voidTrigger a vibration pattern
stop() => voidImmediately cancel any ongoing vibration

Hook

import { useCallback, useEffect, useState } from 'react'
 
export type VibratePattern = number | number[]
 
export function useVibrate() {
  const [isSupported, setIsSupported] = useState(false)
 
  useEffect(() => {
    setIsSupported(typeof window !== 'undefined' && 'vibrate' in navigator)
  }, [])
 
  const vibrate = useCallback(
    (pattern: VibratePattern = 200) => {
      if (isSupported) {
        navigator.vibrate(pattern)
      }
    },
    [isSupported],
  )
 
  const stop = useCallback(() => {
    if (isSupported) {
      navigator.vibrate(0)
    }
  }, [isSupported])
 
  return { isSupported, vibrate, stop }
}