Tile UI React
Source code

Hooks

useMediaQuery

Read responsive state and viewport changes without rewriting browser event plumbing.

Expanded mode simulates a desktop layout with more room for metadata and supporting actions.

import { useMediaQuery } from '@tile-ui/react/hooks';

export default function UseMediaQueryDemo() {
	const isCompact = useMediaQuery('(max-width: 640px)');

	return (

Use this hook to branch your UI on viewport size without wiring matchMedia listeners by hand.

Registry install

pnpm dlx shadcn@latest add @tile-ui/use-media-query

Usage

const isMobile = useMediaQuery('(max-width: 768px)');

What it covers

  • Reactive matchMedia evaluation
  • Listener cleanup on unmount
  • A boolean that re-renders when the query result changes

Common use cases

  • Rendering a compact mobile variant versus a denser desktop layout
  • Hiding secondary navigation on narrow viewports
  • Adjusting density or columns from a single breakpoint
PrevioususeLocalStorageNextExamples