UseIsMobile - Hooks

Interactive JsonSchemaForm JsonTree LottiePlayer MarkdownMessage with Mermaid MarkdownMessage Mermaid OgImageTemplate OpenapiViewer PrettyCode UseQueryParams VideoPlayer

CTASection FeatureSection Hero NewsletterSection StatsSection SuperHero TestimonialSection

useCopy useCountdown useDebounce useDebouncedCallback useDebugTools useDeviceDetect useEventListener useHotkey useImageLoader useIsMobile useLocalStorage useMediaQuery useSessionStorage useThemeContext

Area Chart Bar Chart ChartContainer Donut Chart Line Chart Pie Chart Radial Bar Chart

Aurora Borealis Color Schemes Floating Orbs Geometric Flow AnimatedBackground Liquid Gradient Mesh Gradient Spotlight

122 components

useIsMobile@djangocfg/ui-nextjs

Check if device is mobile (viewport < 768px)

useIsMobile Hook

Check if device is mobile (viewport < 768px)

Desktop Device

Viewport >= 768px

Hook Return Value:

isMobile = false

Try it: Resize your browser window to see the hook update in real-time. The breakpoint is at 768px width.

Comparison:

useIsMobile()

Simple boolean for mobile detection

useMediaQuery('(max-width: 768px)')

Flexible, custom media queries

Usage:

const isMobile = useIsMobile(); // Boolean

return isMobile ? <MobileMenu /> : <DesktopMenu />;

// Or conditionally render
{isMobile && <MobileNavigation />}
{!isMobile && <DesktopNavigation />}

Import

Loading code...