use-detect-device

"use client";
import { useEffect, useState } from "react";

type Device = "Mobile" | "Tablet" | "Desktop";

/**
 * Hook to detect the device type
 * @returns {Device} The device type
 */
export const useDevice = (): Device => {
  const [device, setDevice] = useState<Device>("Desktop");

  useEffect(() => {
    const handleDeviceDetection = () => {
      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) {
        setDevice("Mobile");
      } else if (isTablet) {
        setDevice("Tablet");
      } else {
        setDevice("Desktop");
      }
    };

    handleDeviceDetection();
    window.addEventListener("resize", handleDeviceDetection);

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

  return device;
};

import { useDevice } from "@/hooks/use-detect-device";

const device = useDevice();