useDeviceDetect()

The useDeviceDetect() hook categorizes the user's device into mobile, tablet, or desktop based on screen width media queries.

Import

typescript

import { useDeviceDetect } from 'the-react-hooks';

Usage

Current Device Type

desktop

Component.tsx

import { useDeviceDetect } from 'the-react-hooks';

export const Component = () => {
  const device = useDeviceDetect();

  return (
    <div>
      <p>Device Type: {device}</p>
      
      {device === 'mobile' && <p>Mobile View</p>}
      {device === 'desktop' && <p>Desktop View</p>}
    </div>
  );
}

API

Arguments

customQueries – DeviceQuery[] (Optional) Array of custom query objects to override default breakpoints.

Returns

Returns a string representing the device type:

'mobile' – Screen width < 768px
'tablet' – Screen width 768px - 1023px
'desktop' – Screen width ≥ 1024px

PrevioususeDebounce NextuseEventListener