Reusables

Use Screen Size

A React hook for detecting screen sizes and responsive breakpoints

Installation

npx shadcn@latest add "https://reusables.vercel.app/r/use-screen-size"

Usage

The hook provides screen size detection with predefined breakpoints.

import useScreenSize from "@/hooks/use-screen-size"
const { screenSize, isMobile } = useScreenSize()

Reference

Return Values

PropTypeDefault
screenSize
'xs' | 'sm' | 'md' | 'lg' | '2xl' | '4k'
-
isMobile
boolean
-

Breakpoints

PropTypeDefault
xs
≤ 425px
-
sm
≤ 600px
-
md
≤ 758px
-
lg
≤ 1200px
-
2xl
≤ 1400px
-
4k
≥ 1800px
-
Edit on GitHub

Last updated on

On this page