pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-20 08:31:12 -05:00
Code Issues Packages Projects Releases Wiki Activity

Improve mobile detection hook for better cross-device compatibility

Browse Source 
Update useIsMobile hook to use MediaQueryList.matches for detecting mobile devices, addressing SSR compatibility and improving initial value setting and event listening.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: fe5b902e-beda-40fc-bf87-a3c4ab300e3a
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
This commit is contained in:
pac7
2025-10-08 12:54:03 +00:00
parent 2b1dcd70ef
commit 852adc51d6
1 changed files with 11 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/hooks/use-mobile.tsx
View File

@@ -6,14 +6,23 @@ export function useIsMobile(): boolean | undefined {
const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined); const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
React.useEffect(() => { React.useEffect(() => {
// Guard against server-side rendering
if (typeof window === 'undefined') return; if (typeof window === 'undefined') return;
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`); const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
// Use MediaQueryList.matches instead of window.innerWidth for consistency
const onChange = () => { const onChange = () => {
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT); setIsMobile(mql.matches);
}; };
// Set initial value
setIsMobile(mql.matches);
// Listen for changes
mql.addEventListener("change", onChange); mql.addEventListener("change", onChange);
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
// Cleanup listener on unmount
return () => mql.removeEventListener("change", onChange); return () => mql.removeEventListener("change", onChange);
}, []); }, []);