Overview
The useMobileDetect hook detects whether the user is on a mobile device by analyzing the user agent string. It automatically updates when the window is resized, making it ideal for responsive layouts and conditional rendering.
Hook Signature
const isMobile = useMobileDetect();
Return Value
Returns true if the user is on a mobile device (Android, iPhone, iPad, iPod, BlackBerry, IEMobile, or Opera Mini), false otherwise.
Detection Logic
The hook uses a regular expression to test the user agent string:
const userAgent = navigator.userAgent || navigator.vendor || window.opera;
const mobileCheck = /android|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(
userAgent
);
Supported Devices
- Android devices
- iPhone
- iPad
- iPod
- BlackBerry
- IEMobile
- Opera Mini
Usage Examples
Podcast List
From /home/daytona/workspace/source/src/components/PodcastList/PodcastList.jsx:29:
import useMobileDetect from "../../hooks/useMobileDetect";
const PodcastList = ({ onPlayPodcast }) => {
const navigate = useNavigate();
const dispatch = useDispatch();
const isMobile = useMobileDetect();
// Use isMobile for conditional rendering
return (
<div className={isMobile ? styles.mobileLayout : styles.desktopLayout}>
{/* Podcast list content */}
</div>
);
};
Podcast Detail
From /home/daytona/workspace/source/src/components/PodcastDetail/PodcastDetail.jsx:53:
import useMobileDetect from "../../hooks/useMobileDetect";
const PodcastDetail = ({ onPlayPodcast }) => {
const { id } = useParams();
const navigate = useNavigate();
const dispatch = useDispatch();
const isMobile = useMobileDetect();
// Adjust UI based on mobile detection
};
MP3 Player
From /home/daytona/workspace/source/src/components/MP3Player/MP3Player.jsx:58:
import useMobileDetect from "../../hooks/useMobileDetect";
const MP3Player = () => {
const isMobile = useMobileDetect();
// Render mobile-optimized player controls
return isMobile ? <MobilePlayer /> : <DesktopPlayer />;
};
Sleep Timer
From /home/daytona/workspace/source/src/components/SleepTimer/SleepTimer.jsx:18:
import useMobileDetect from "../../hooks/useMobileDetect";
const SleepTimer = () => {
const isMobile = useMobileDetect();
// Adjust timer UI for mobile devices
};
/home/daytona/workspace/source/src/components/ScrollToTop/ScrollToTop.jsx:8:
import useMobileDetect from "../../hooks/useMobileDetect";
const ScrollToTop = () => {
const isMobile = useMobileDetect();
// Position button differently on mobile
};
Implementation Details
Complete Source Code
import { useState, useEffect } from "react";
const useMobileDetect = () => {
const [isMobile, setIsMobile] = useState(false);
useEffect(() => {
const checkIfMobile = () => {
const userAgent = navigator.userAgent || navigator.vendor || window.opera;
const mobileCheck = /android|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(
userAgent
);
setIsMobile(mobileCheck);
};
checkIfMobile();
window.addEventListener("resize", checkIfMobile);
return () => window.removeEventListener("resize", checkIfMobile);
}, []);
return isMobile;
};
export default useMobileDetect;
Resize Listener
The hook attaches a resize event listener to re-check mobile status when the window is resized:
window.addEventListener("resize", checkIfMobile);
// Cleanup
return () => window.removeEventListener("resize", checkIfMobile);
Common Use Cases
Conditional Rendering
const isMobile = useMobileDetect();
return (
<>
{isMobile ? (
<MobileNavigation />
) : (
<DesktopNavigation />
)}
</>
);
CSS Class Application
const isMobile = useMobileDetect();
return (
<div className={`container ${isMobile ? 'mobile' : 'desktop'}`}>
{/* Content */}
</div>
);
Feature Toggling
const isMobile = useMobileDetect();
const showAdvancedFeatures = !isMobile;
return (
<>
<BasicFeatures />
{showAdvancedFeatures && <AdvancedFeatures />}
</>
);
Best Practices
Use this hook in combination with CSS media queries for the most robust responsive design. The hook is best for conditional logic, while CSS handles visual styling.
The hook checks on component mount and window resize. For tablet detection, consider using useWindowWidth for more granular breakpoint control.
User agent detection can be spoofed and may not be 100% accurate. For critical functionality, combine with feature detection or CSS media queries.
- Single regex test on mount and resize
- Automatic cleanup of event listeners
- No external dependencies
