Skip to main content

useIsMobile hook

A client-side hook that tracks viewport width and returns a boolean indicating whether the device is below the mobile breakpoint (768px). Uses window.matchMedia for efficient resize detection without polling.

Hooks​

HookDescription
useIsMobileReturns true when viewport width is below 768px

useIsMobile​

Tracks viewport width using a media query listener and returns whether the current window is mobile-sized.

Signature​

function useIsMobile(): boolean

Parameters​

None.

Returns​

FieldTypeDescription
(return value)booleantrue if viewport width is below 768px, false otherwise

Example​

import { useIsMobile } from '@/core/hooks/ui/use-mobile';

function Header() {
  const isMobile = useIsMobile();

  return isMobile ? <MobileNav /> : <DesktopNav />;
}

Notes​

  • Initial render returns false (the undefined state is coerced to false via !!isMobile).
  • The breakpoint constant MOBILE_BREAKPOINT is set to 768px and is not configurable.
  • Uses matchMedia change event listener rather than window resize for better performance.