useIsMobile for React

Reports whether the viewport is below the mobile breakpoint.

useIsMobile says whether the viewport is narrower than 768px, and keeps the answer current as the window resizes.

It starts as false on the server and on the first render, then measures in an effect, so the server's HTML always matches. Try the demo at the phone width. For any other breakpoint or feature, use useMediaQuery.

PreviewCode

Desktop layout

Mobile is narrower than 768px.

false

Installation

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email insteadNo credit card

Anatomy

Usage

import { useIsMobile } from "@/hooks/use-is-mobile";

API Reference

Returns

ValueType

returnsboolean

true below 768px.

With other components

Free
Sidebar
Navigation
Turn the sidebar into a sheet below 768px
Free
Drawer
Overlays
Show a drawer on phones, a dialog above 768px
Free
Sheet
Overlays
Slide the menu in as a sheet when isMobile
Free
Bottom Navigation
Navigation
Show bottom navigation only on phones
Free
Popover
Overlays
Open a drawer instead of a popover on phones
Free
Navigation Menu
Navigation
Collapse the navigation menu below 768px

Free
useMediaQuery
Screen & layout
Any other breakpoint or feature, as a query
Free
useWindowSize
Screen & layout
The exact width and height, not a yes or no
Free
useResizeObserver
Screen & layout
Respond to a container's width, not the viewport's
Free
useIsClient
Lifecycle
Tell the server's first false from a real one
Free
useScrollLock
Page & browser
Lock the page while the mobile menu is open
Free
useScreen
Screen & layout
The device screen's size and orientation

All 35 hooks