useDetectDevice

A hook for detecting the user's device type and platform

Source Code

"use client";
 
import { useEffect, useState } from "react";
 
type useDetectDevidePorps = {
  isMobile: boolean;
  isDesktop: boolean;
  isAndroid: boolean;
  isIos: boolean;
};
 
const getDetectDevice = (
  userAgent: NavigatorID["userAgent"]
): useDetectDevidePorps => {
  const isAndroid = /Android/.test(userAgent);
  const isIos = /iPad|iPhone/.test(userAgent);
  const isMobile = isAndroid || isIos;
  const isDesktop = !isMobile;
 
  return {
    isMobile,
    isDesktop,
    isAndroid,
    isIos,
  };
};
 
const useDetectDevice = () => {
  const [deviceInfo, setDeviceInfo] = useState<useDetectDevidePorps>({
    isMobile: false,
    isDesktop: false,
    isAndroid: false,
    isIos: false,
  });
 
  useEffect(() => {
    const userAgent =
      typeof navigator === "undefined" ? "SSR" : navigator.userAgent;
    setDeviceInfo(getDetectDevice(userAgent));
  }, []);
 
  return deviceInfo;
};
 
export default useDetectDevice;

Features

Device Detection: Detect if the user is on a mobile or desktop device
Platform Detection: Identify specific platforms (Android, iOS)
SSR Support: Handles server-side rendering gracefully

API Reference

The hook returns an object with the following methods:

Prop	Default	Type	Description
`isMobileDevice`	-	`boolean`	True if the device is a mobile device
`isDesktopDevice`	-	`boolean`	True if the device is a desktop device
`isAndroidDevice`	-	`boolean`	True if the device is running Android.
`isIosDevice`	-	`boolean`	True if the device is running iOS (iPhone, iPad, or iPod).

Examples

Basic Usage

const Example = () => {
  const { isMobile } = useDetectDevice();
 
  return <div>{isMobile ? <MobileLayout /> : <DesktopLayout />}</div>;
};

Platform-Specific Features

const AddToWallet = () => {
  const { isAndroid, isIos } = useDetectDevice();
 
  return (
    <div>
      {isAndroid && <AddToGoogleWallet />}
      {isIos && <AddToAppleWallet />}
    </div>
  );
};

Technical Notes

The hook uses the navigator.userAgent string to detect devices

math

useIntersectionObserver