astro/.changeset/wicked-gifts-cover.md

astro
minor

Adds support for the client:media hydrator

The new client:media hydrator allows you to define a component that should only be loaded when a media query matches. An example usage:

---
import Sidebar from '../components/Sidebar.jsx';
---

<Sidebar client:media="(max-width: 700px)" />

This allows you to define components which, for example, only run on mobile devices. A common example is a slide-in sidebar that is needed to add navigation to a mobile app, but is never displayed in desktop view.

Since Astro components can have expressions, you can move common media queries to a module for sharing. For example here are defining:

media.js

export const MOBILE = '(max-width: 700px)';

And then you can reference this in your page:

index.astro

import Sidebar from '../components/Sidebar.jsx';
import { MOBILE } from '../media.js';
---

<Sidebar client:media={MOBILE} />