Skip to main content

useIsMobile

Location: src/hooks/useIsMobile.js

Overview​

Provides two responsive design hooks: useIsMobile for a simple boolean mobile check, and useBreakpoint for a named breakpoint string. Both listen to window.resize events and update reactively.

Use useIsMobile when you need a simple mobile/desktop toggle. Use useBreakpoint when you need to differentiate between mobile, tablet, and desktop layouts.

Signature​

function useIsMobile(breakpoint?: number): boolean

function useBreakpoint(): 'mobile' | 'tablet' | 'desktop'

Parameters​

useIsMobile​

ParameterTypeRequiredDefaultDescription
breakpointnumberNo640Width threshold in pixels. Below this value returns true.

useBreakpoint​

This hook takes no parameters.

Return Value​

useIsMobile​

TypeDescription
booleantrue if window.innerWidth < breakpoint, false otherwise

useBreakpoint​

TypeDescription
'mobile' | 'tablet' | 'desktop''mobile' if width < 640px, 'tablet' if width < 1024px, 'desktop' otherwise

Usage​

import { useIsMobile, useBreakpoint } from '../hooks/useIsMobile';

function ResponsiveLayout({ children }) {
  const isMobile = useIsMobile();
  const breakpoint = useBreakpoint();

  return (
    <div className={`layout layout--${breakpoint}`}>
      {!isMobile && <Sidebar />}
      <main>{children}</main>
    </div>
  );
}

Notes​

  • Both hooks handle SSR safety by checking typeof window !== 'undefined'.
  • useIsMobile defaults to false when window is not available.
  • The resize event listener is cleaned up on unmount.
  • Breakpoint thresholds: mobile < 640px, tablet < 1024px, desktop >= 1024px.

Last updated: 2026-02-07