Skip to main content
supportsHaptics is a boolean constant exported from ios-haptics. It is true on touch-pointer devices (coarse pointer) and false otherwise. Import 
import { supportsHaptics } from 'ios-haptics'

​
How it works

supportsHaptics uses window.matchMedia("(pointer: coarse)") to detect whether the primary pointer device is a touchscreen. In SSR and other non-browser environments where typeof window === "undefined", it returns false. The exact source logic: 
export const supportsHaptics =
  typeof window === "undefined"
    ? false
    : window.matchMedia("(pointer: coarse)").matches;

​
Usage

import { haptic, supportsHaptics } from 'ios-haptics'

if (supportsHaptics) {
  haptic()
}
haptic() checks supportsHaptics internally (after first checking navigator.vibrate), so calls on unsupported devices are silently no-ops. You only need to read supportsHaptics yourself if you want to conditionally show or hide UI based on haptic support.
You can also use it to conditionally render haptic-related UI: 
import { haptic, supportsHaptics } from 'ios-haptics'

if (supportsHaptics) {
  const button = document.createElement('button')
  button.textContent = 'Tap for haptic'
  button.addEventListener('click', () => haptic())
  document.body.appendChild(button)
}

​
Return value

boolean — true if the device has a coarse pointer (i.e., touchscreen), false otherwise.
supportsHaptics is evaluated once at module load time, not per-call. It will always be false during server-side rendering.