#create Component based on browser width

3 messages · Page 1 of 1 (latest)

frozen heron
#

How can I check browser width before rendering a Astro component? Ie {media = 700px ? <Component /> : "";

alpine berryBOT
#

Hi @frozen heron. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Astro v0.18 introduces a way to customize partial hydration using CSS media queries. You can use the client:media directive to conditionally hydrate a component based on the media condition. Here's an example:

<Component client:media="(min-width: 700px)" />

In this example, the Component will only hydrate once the media condition (min-width: 700px) is met. This means that the component will only be rendered and interactive when the browser width is at least 700px.

Source: Astro 0.18 Release - Responsive partial hydration (https://astro.build/blog/astro-018#responsive-partial-hydration)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Astro
Astro 0.18 Release | Astro

Introducing: Responsive partial hydration • Solid.js support • Lit SSR support • Named slots • Global style support • and more!