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
Type | Description |
---|---|
boolean | Returns true if viewport is mobile-sized (< 768px), false otherwise |