useMediaQuery
Screen-size hooks. useMediaQuery subscribes to a CSS
media query. useIsMobile is the shared "below Tailwind's lg breakpoint"
check used to switch between desktop and mobile component layouts.
Functions¶
useIsMobile()¶
Defined in: src/shared/hooks/useMediaQuery.ts:38
Whether the viewport is mobile-sized (below Tailwind's lg = 1024px, i.e. up
to iPad Pro). Matches the lg: breakpoint the shell nav and player layout
use, so JS-driven swaps (toolbar, panel-dock icons) stay in sync with the CSS
layout.
Returns¶
boolean
useMediaQuery()¶
Defined in: src/shared/hooks/useMediaQuery.ts:16
Subscribes to a media query and returns whether it currently matches, updating on viewport changes.
Parameters¶
| Parameter | Type | Description |
|---|---|---|
query |
string |
A CSS media query, e.g. "(max-width: 639px)". |
Returns¶
boolean
Whether the query currently matches.