useDetectDevice

Shadcn cURL wget

React hook that returns the type of device the code is running on.

Example

Demo Code

import clsx from "clsx";
import { useDetectDevice } from "@/hooks/useDetectDevice";

export default function UseDetectDeviceExample() {
  const { isSupported, deviceType, isMobile, isTablet, isDesktop } =
    useDetectDevice();

  if (!isSupported) {
    return <p>Device detection is not supported</p>;
  }

  const getDeviceTypeColor = () => {
    if (isMobile) {
      return "bg-ctp-red";
    } else if (isTablet) {
      return "bg-ctp-orange";
    } else if (isDesktop) {
      return "bg-ctp-black";
    } else {
      return "bg-ctp-gray";
    }
  };

  return (
    <div className="flex items-center justify-start">
      <div className="w-48">
        <div className={clsx("rounded border-2 p-4", getDeviceTypeColor())}>
          <p className="text-center text-xs font-bold leading-none">
            Device Type: {deviceType}
          </p>
        </div>
      </div>
    </div>
  );
}

Code

import { useState, useEffect } from "react";

export type deviceType = "Mobile" | "Tablet" | "Desktop";

export type DeviceState = {
  isSupported: boolean;
  deviceType: deviceType;
  isMobile: boolean;
  isTablet: boolean;
  isDesktop: boolean;
};

/**
 * React hook that returns the type of device the code is running on.
 * @returns {DeviceState} The type of device the code is running on.
 */

export const useDetectDevice = (): DeviceState => {
  const [deviceState, setDeviceState] = useState<DeviceState>({
    isSupported: true,
    deviceType: "Desktop",
    isMobile: false,
    isTablet: false,
    isDesktop: true,
  });

  useEffect(() => {
    const handleDeviceDetection = () => {
      if (typeof navigator === "undefined") {
        setDeviceState((prevState) => ({
          ...prevState,
          isSupported: false,
        }));
        return;
      }

      const userAgent = navigator.userAgent.toLowerCase();
      const isMobile =
        /iphone|ipad|ipod|android|blackberry|windows phone/g.test(userAgent);
      const isTablet =
        /(ipad|tablet|playbook|silk)|(android(?!.*mobile))/g.test(userAgent);

      if (isMobile) {
        setDeviceState({
          isSupported: true,
          deviceType: "Mobile",
          isMobile: true,
          isTablet: false,
          isDesktop: false,
        });
      } else if (isTablet) {
        setDeviceState({
          isSupported: true,
          deviceType: "Tablet",
          isMobile: false,
          isTablet: true,
          isDesktop: false,
        });
      } else {
        setDeviceState({
          isSupported: true,
          deviceType: "Desktop",
          isMobile: false,
          isTablet: false,
          isDesktop: true,
        });
      }
    };

    handleDeviceDetection();
    window.addEventListener("resize", handleDeviceDetection);
    return () => {
      window.removeEventListener("resize", handleDeviceDetection);
    };
  }, []);

  return deviceState;
};