DOM & Layout·loomora → useResponsive
useResponsive
Inspects active viewport dimensions and calculates semantic breakpoint states (isMobile, isTablet, isDesktop, isUltra) and granular scale checks (isSm, isMd, isLg, etc.).
Interactive live playground
Interact with the hook state and inspect computed return values in real time.
Window Dimensions
0 × 0px
Resize your browser window to observe breakpoints update reactively.
xssmmdlgxl2xl3xl
Breakpoint Status
How to call
Import directly from the Loomora root package in any React client component.
import { useResponsive } from 'loomora'
export function Example() {
const { isMobile, isTablet, isDesktop, windowSize } = useResponsive()
return (
<div>
<p>Device: {isMobile ? 'Mobile' : isTablet ? 'Tablet' : 'Desktop'}</p>
<p>Viewport: {windowSize.width} × {windowSize.height}px</p>
</div>
)
}Return values & methods
API signatures and utilities returned by this hook.
| Method / Prop | Type | Description |
|---|---|---|
| isMobile | boolean | True when viewport is below the tablet breakpoint (ltSm). |
| isTablet | boolean | True when viewport matches the tablet range (md). |
| isDesktop | boolean | True when viewport is desktop size or larger (lg). |
| isUltra | boolean | True when viewport is ultra-wide (2xl+). |
| windowSize | { width: number; height: number } | Current window inner width and height in pixels. |
| UseResponsive(sizes, fallback) | <T>(sizes: Partial<Record<ScreenSize, T>>, fallback?: T) => T | Selects the value matching the current screen breakpoint. |