v1.1.1 · react 16.8 → 19 · 0 runtime deps

useIsMobile()

A tiny React hook that returns a boolean the moment your viewport crosses the mobile threshold. Resize this window — the whole page reacts.

$ npm install useismobile

your viewport — right now live

// interactive

Watch it decide, in real time

Drag the threshold, then resize your browser. The device frame flips the instant the viewport crosses your breakpoint — exactly what your components will see.

mobileScreenSize 768px

🖥️

DESKTOP

— px

useIsMobile(768) → false

↳ tip: open device emulation (DevTools) or just shrink the window.

// why

Small enough to forget about

⟨∅⟩

Zero dependencies

Just the hook. No bloat, no transitive deps — the whole library is a single file.

⊥

SSR-aware

Throws a clear error when window.matchMedia isn't around, so SSR surprises never ship to production.

↔

Debounced

Pass debounce: 100 to throttle rapid resizes — perfect for expensive re-renders.

⇅

Orientation

Enable portrait / landscape detection in one option and get both signals back.

⟶

Legacy friendly

Falls back to addListener for older browsers that predate addEventListener on MediaQueryList.

{ }

React 16.8 → 19

Works across React 16.8, 17, 18 and 19 — wherever hooks are supported.

// install

Pick your package manager

npm

npm install useismobile

yarn

yarn add useismobile

pnpm

pnpm add useismobile

// usage

From zero to mobile-aware

01. Basic usage

import useIsMobile from 'useismobile'

function App() {
  const isMobile = useIsMobile()
  return <h1>{isMobile ? 'Mobile' : 'Desktop'}</h1>
}

02. Custom breakpoint

// treat anything ≤ 1024px as mobile
const isTablet = useIsMobile(1024)

03. Debounce + orientation

const { isMobile, orientation } = useIsMobile(768, {
  debounce: 100,
  enableOrientation: true,
})
// orientation → 'portrait' | 'landscape'

04. Next.js (App Router)

'use client'
import useIsMobile from 'useismobile'

export default function Page() {
  const isMobile = useIsMobile()
  return <p>{isMobile ? '📱' : '🖥️'}</p>
}