Skip to main content

​
Overview

The useUserAgent hook provides information about the user’s device type and capabilities.

​
Import

import { useUserAgent } from 'sunpeak';

​
Signature

function useUserAgent(): UserAgent | null

​
Returns

A UserAgent object, or null if not available: 
{
  device: {
    type: 'mobile' | 'tablet' | 'desktop' | 'unknown'
  },
  capabilities: {
    hover: boolean,  // Whether device supports hover
    touch: boolean   // Whether device supports touch
  }
}

​
Usage

import { useUserAgent } from 'sunpeak';

function MyWidget() {
  const userAgent = useUserAgent();

  return (
    <div>
      <p>Device: {userAgent?.device.type}</p>
      <p>Touch: {userAgent?.capabilities.touch ? 'Yes' : 'No'}</p>
      <p>Hover: {userAgent?.capabilities.hover ? 'Yes' : 'No'}</p>
    </div>
  );
}