useIsMobile

1// Copyright (c) 2026 raouf.codes - Azemmur
2 
3'use client';
4 
5import { useState, useEffect } from 'react';
6 
7const DEFAULT_BREAKPOINT = 1024;
8 
9/**
10 * Hook to detect whether the current viewport is considered "mobile".
11 *
12 * Uses a resize listener to determine if the viewport width is below the breakpoint.
13 * Returns `undefined` during SSR, then `true` or `false` after hydration.
14 *
15 * @example
16 * ```tsx
17 * const isMobile = useIsMobile();
18 * if (isMobile) {
19 *   // Render mobile layout
20 * }
21 * ```
22 *
23 * @param breakpoint - The width threshold in pixels (default: 1024)
24 * @returns `undefined` during SSR, `true` if mobile, `false` otherwise
25 */
26export function useIsMobile(breakpoint = DEFAULT_BREAKPOINT) {
27  const [isMobile, setIsMobile] = useState<boolean | undefined>(undefined);
28 
29  useEffect(() => {
30    const checkScreenSize = () => {
31      setIsMobile(window.innerWidth < breakpoint);
32    };
33 
34    checkScreenSize();
35    window.addEventListener('resize', checkScreenSize);
36 
37    return () => {
38      window.removeEventListener('resize', checkScreenSize);
39    };
40  }, [breakpoint]);
41 
42  return isMobile;
43}