useIsTouchDevice

This hook detects if the user's device has touch screen functionality.

Touch Support Status:

Non-Touch Device

Your device does not support touch input

Installation

bash npx guarahooks@latest add use-is-touch-device

Basic Usage

import { useIsTouchDevice } from '@/hooks/guarahooks/use-is-touch-device';
 
function Component() {
  const { isTouchable } = useIsTouchDevice();
 
  return (
    <div>
      {isTouchable ? (
        <p>This device supports touch input</p>
      ) : (
        <p>This device does not support touch input</p>
      )}
    </div>
  );
}

API

Parameters

This hook takes no parameters.

Return

Property	Type	Description
`isTouchable`	`boolean`	Whether the device supports touch input

Examples

Conditional Rendering Based on Touch Support

import { useIsTouchDevice } from '@/hooks/guarahooks/use-is-touch-device';
 
function ResponsiveInterface() {
  const { isTouchable } = useIsTouchDevice();
 
  return (
    <div>
      {isTouchable ? (
        <button className="touch-button">Tap me</button>
      ) : (
        <button className="hover-button">Click me</button>
      )}
    </div>
  );
}

Touch-Optimized Styling

import { useIsTouchDevice } from '@/hooks/guarahooks/use-is-touch-device';
 
function InteractiveElement() {
  const { isTouchable } = useIsTouchDevice();
 
  return (
    <div
      className={`
        interactive-element 
        ${isTouchable ? 'touch-optimized' : 'hover-optimized'}
      `}
    >
      Content
    </div>
  );
}

Features

✅ SSR Support
✅ TypeScript
✅ Performance optimized
✅ React 18+ compatible
✅ Cross-browser compatibility

Implementation Details

The hook uses multiple detection methods for better compatibility:

'ontouchstart' in window - Standard touch event detection
navigator.maxTouchPoints > 0 - Modern touch point detection
navigator.msMaxTouchPoints > 0 - Legacy IE/Edge support

useMedia - Media query matching
useOS - Operating system detection
useOrientation - Device orientation