About The Project

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

Built With

• React.js
• Babel
• Jest
• Semantic Release

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

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 />
}

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>
}

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

License

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

Contact

Tufantunc - @tufant

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