Skip to main content

useDeviceType()

Detects the device type (mobile, tablet, or desktop) based on window width. Ideal for responsive design and device-specific UI in React applications.

Import​

import { useDeviceType } from "reactuals";

Demo​

Loading...

Usage​

import { useDeviceType } from "reactuals";

function DeviceInfo() {
  const { deviceType, isMobile, isTab, isDesktop } = useDeviceType();

  return (
    <div className="p-4">
      <p className="mt-4">Device Type: {deviceType}</p>
      <p className="mt-2">Is Mobile? {isMobile ? "Yes" : "No"}</p>
      <p className="mt-2">Is Tablet? {isTab ? "Yes" : "No"}</p>
      <p className="mt-2">Is Desktop? {isDesktop ? "Yes" : "No"}</p>
    </div>
  );
}