useDeviceCapabilities

sunpeak API

Overview

The useDeviceCapabilities hook returns the device input capabilities reported by the host. It is a convenience wrapper around useHostContext.

Wraps onhostcontextchanged

MCP Apps SDK reference

Import

import { useDeviceCapabilities } from 'sunpeak';

Signature

function useDeviceCapabilities(): DeviceCapabilities

Returns

return

DeviceCapabilities

Device input capabilities reported by the host:

{
  touch?: boolean;  // Whether the device supports touch input
  hover?: boolean;  // Whether the device supports hover interactions
}

Returns an empty object {} if the host does not report capabilities.

Usage

import { useDeviceCapabilities } from 'sunpeak';

function MyResource() {
  const { touch, hover } = useDeviceCapabilities();

  return (
    <button className={touch ? 'p-4 text-lg' : 'p-2'}>
      {hover ? 'Hover me' : 'Tap me'}
    </button>
  );
}

The device capabilities come from McpUiHostContext.deviceCapabilities.

For browser-level detection outside of React or when host context is unavailable, sunpeak also exports isPrimarilyTouchDevice and isHoverAvailable utility functions.

useDisplayModeGet the current display mode.

​Overview

Wraps onhostcontextchanged

​Import

​Signature

​Returns

​Usage

Overview

Import

Signature

Returns

Usage