Skip to main content

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.

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

booleantrue 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.

Build docs developers (and LLMs) love