react-usekit

Beta

useIsMobile

A custom hook that detects if the current viewport is mobile-sized.

Installation

npx react-usekit@latest init

Select: hooks → TypeScript or JavaScript → path -> useIsMobile

Usage

import { useIsMobile } from "./hooks/useIsMobile";

function ResponsiveComponent() {
  const isMobile = useIsMobile();

  return (
    <div>
      <p>Device type: {isMobile ? "Mobile" : "Desktop"}</p>
      {isMobile ? (
        <div>
          <h2>Mobile View</h2>
          <p>Simplified mobile interface</p>
        </div>
      ) : (
        <div>
          <h2>Desktop View</h2>
          <p>Full desktop interface with sidebar</p>
        </div>
      )}
    </div>
  );
}

The hook uses a breakpoint of 768px to determine mobile vs desktop. It automatically updates when the window is resized.

API

Parameters

This hook doesn't accept any parameters.

Returns

TypeDescription
booleanReturns true if viewport is mobile-sized (< 768px), false otherwise