useIsMobile

A simple React hook that provides a boolean for the screen is mobile or not.
Supports React 16.8+, 17, 18, and 19.

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Contributing
5. License
6. Contact

About The Project

useIsMobile is a custom hook for React. It gives you a boolean for the screen is mobile or not.

(back to top)

Built With

• React.js
• Babel
• Jest
• Semantic Release

(back to top)

Getting Started

Prerequisites

React and ReactDOM must be installed in your project (supports React 16.8+, 17, 18, and 19).

• npm

  npm install react react-dom

Installation

1. Install via npm

   npm install useismobile

2. Install via yarn

   yarn add useismobile

(back to top)

Usage

You can see a basic usage example at codespace demo

Basic Usage

import useIsMobile from 'useismobile'

function App() {
  const isMobile = useIsMobile()

  return (
    <div>
      <h1>Current Device:</h1>
      <p>{isMobile ? 'Mobile Device' : 'Desktop'}</p>
    </div>
  )
}

Custom Screen Size

You can specify a custom breakpoint:

function App() {
  // Consider mobile if screen width is 1024px or less
  const isMobile = useIsMobile(1024)

  return (
    <div>
      <p>{isMobile ? 'Tablet/Mobile' : 'Desktop'}</p>
    </div>
  )
}

Multiple Breakpoints

Use multiple instances for different breakpoints:

function App() {
  const isMobile = useIsMobile(480)
  const isTablet = useIsMobile(1024)

  return (
    <div>
      {isMobile && <MobileNav />}
      {isTablet && !isMobile && <TabletNav />}
      {!isTablet && <DesktopNav />}
    </div>
  )
}

TypeScript Usage

import useIsMobile from 'useismobile';

function App(): JSX.Element {
  const isMobile = useIsMobile(768);

  return <div>{isMobile ? 'Mobile' : 'Desktop'}</div>;
}

With Next.js (SSR)

Since this hook requires window.matchMedia, it won't work on server-side rendering. Use dynamic import:

// Next.js App Router
'use client'
import useIsMobile from 'useismobile'

export default function Page() {
  const isMobile = useIsMobile()
  return <div>{isMobile ? 'Mobile' : 'Desktop'}</div>
}

Or use dynamic import in Pages Router:

import dynamic from 'next/dynamic'

const MobileDetector = dynamic(
  () => import('./MobileDetector').then((mod) => mod.default),
  { ssr: false }
)

export default function Page() {
  return <MobileDetector />
}

(back to top)

Server-Side Rendering (SSR) Support

This hook relies on the browser's window.matchMedia API and therefore only works in client-side environments. If you're using a framework with SSR (Next.js, Gatsby, Remix, etc.), you'll need to handle this appropriately.

Framework-Specific Examples

Next.js (App Router)

'use client'
import useIsMobile from 'useismobile'

export default function Page() {
  const isMobile = useIsMobile()
  // Component will only render on client
}

Next.js (Pages Router)

import { useEffect, useState } from 'react'
import useIsMobile from 'useismobile'

export default function Page() {
  const [isMounted, setIsMounted] = useState(false)
  const isMobile = useIsMobile()

  useEffect(() => {
    setIsMounted(true)
  }, [])

  if (!isMounted) {
    return null // Or a loading state
  }

  return <div>{isMobile ? 'Mobile' : 'Desktop'}</div>
}

Gatsby

import { useEffect, useState } from 'react'
import useIsMobile from 'useismobile'

export default function Page() {
  const [isMounted, setIsMounted] = useState(false)
  const isMobile = useIsMobile()

  useEffect(() => {
    setIsMounted(true)
  }, [])

  if (!isMounted) return null

  return <div>{isMobile ? 'Mobile' : 'Desktop'}</div>
}

(back to top)

Contributing

Any contribution is welcome.

Commitizen standardizes to commit messages, just don't forget to use npm commit command.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Make your changes.
4. Commit your Changes with npm (npm run commit)
5. Push to the Branch (git push origin feature/AmazingFeature)
6. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE for more information.

(back to top)

Contact

Tufantunc - @tufant

Project Link: https://github.com/tufantunc/useismobile

(back to top)