isTouchDevice

import { isTouchDevice } from 'cx/util';

The isTouchDevice function checks if the current device supports touch events.

Basic Usage

import { isTouchDevice } from "cx/util";

if (isTouchDevice()) {
  // Touch-enabled device
  console.log("Touch supported");
} else {
  // Mouse/keyboard device
  console.log("No touch support");
}

How It Works

The function checks for the presence of ontouchstart in the window object. The result is cached after the first call for performance.

Common Use Cases

Conditional UI

import { isTouchDevice } from "cx/util";

function getTooltipTrigger(): "hover" | "click" {
  return isTouchDevice() ? "click" : "hover";
}

Touch-Specific Styling

import { isTouchDevice } from "cx/util";

const buttonClass = isTouchDevice()
  ? "button button-large" // Larger touch targets
  : "button";

Event Handling

import { isTouchDevice } from "cx/util";

const dragEvents = isTouchDevice()
  ? { onTouchStart: handleStart, onTouchMove: handleMove, onTouchEnd: handleEnd }
  : { onMouseDown: handleStart, onMouseMove: handleMove, onMouseUp: handleEnd };

API

function isTouchDevice(): boolean;

Returns: true if the device supports touch events.