useIsMobile

sensors

Installation

npx usehooks-cli@latest add use-is-mobile

Description

A React hook for detecting mobile devices using media queries and user agent detection. Provides real-time updates when the device orientation or window size changes.

Return Type

UseIsMobileReturn

Property	Type	Description
isMobile	boolean	Whether the current device is detected as mobile
isLoading	boolean	Whether the hook is still determining the device type

Examples

Basic Mobile Detection

Simple mobile device detection

const { isMobile, isLoading } = useIsMobile();

if (isLoading) {
  return <div>Detecting device...</div>;
}

return (
  <div>
    <p>Device type: {isMobile ? 'Mobile' : 'Desktop'}</p>
    {isMobile ? (
      <MobileNavigation />
    ) : (
      <DesktopNavigation />
    )}
  </div>
);

Responsive Component

Conditionally render components based on device type

const { isMobile } = useIsMobile();

return (
  <div className={isMobile ? 'mobile-layout' : 'desktop-layout'}>
    {isMobile ? (
      <TouchFriendlyButton />
    ) : (
      <HoverButton />
    )}
  </div>
);

Dependencies

react

Notes

•Uses media query (max-width: 768px) as primary detection method
•Falls back to user agent detection for additional accuracy
•Automatically updates when window is resized or orientation changes
•Provides loading state during initial detection

Implementation

'use client';

import { useState, useEffect } from "react";

interface UseIsMobileReturn {
  isMobile: boolean;
  isLoading: boolean;
}

export const useIsMobile = (): UseIsMobileReturn => {
  const [isMobile, setIsMobile] = useState(false);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const checkIsMobile = () => {
      // Check using media query
      const mediaQuery = window.matchMedia("(max-width: 768px)");
      
      // Check using user agent (additional detection)
      const userAgent = navigator.userAgent.toLowerCase();
      const mobileKeywords = [
        'android', 'webos', 'iphone', 'ipad', 'ipod', 
        'blackberry', 'windows phone', 'mobile'
      ];
      
      const isMobileUA = mobileKeywords.some(keyword => 
        userAgent.includes(keyword)
      );
      
      // Combine both checks - prioritize media query but consider user agent
      const isMobileDevice = mediaQuery.matches || 
        (isMobileUA && window.innerWidth <= 768);
      
      setIsMobile(isMobileDevice);
      setIsLoading(false);
    };

    // Initial check
    checkIsMobile();

    // Listen for media query changes
    const mediaQuery = window.matchMedia("(max-width: 768px)");
    const handleChange = () => checkIsMobile();
    
    if (mediaQuery.addEventListener) {
      mediaQuery.addEventListener('change', handleChange);
    } else {
      // Fallback for older browsers
      mediaQuery.addListener(handleChange);
    }

    // Listen for window resize
    window.addEventListener('resize', checkIsMobile);

    return () => {
      if (mediaQuery.removeEventListener) {
        mediaQuery.removeEventListener('change', handleChange);
      } else {
        mediaQuery.removeListener(handleChange);
      }
      window.removeEventListener('resize', checkIsMobile);
    };
  }, []);

  return {
    isMobile,
    isLoading,
  };
};

export default useIsMobile;

useHover

CLI Docs All Hooks

useIsTablet