supportsHaptics

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.

Get Started

API Reference

Guides

How it works

Usage

Return value

​How it works

​Usage

​Return value

How it works

Usage

Return value