Take a media query (or a function that returns one if you want reactivity) as input and you can check if it currently matches doing `instance.match`


The result of the media query (min-width: 640px) is


The simplest way of using this utility is just by passing a string with a valid media query.

  import { MediaQuery } from "runed";
  const screen = new MediaQuery("(min-width: 640px)");
{#if screen.matches}
  Your screen is less than 640px
  Your screen is more than 640px

You can also pass a getter that returns a string.

	<script lang="ts">
  import { MediaQuery } from "runed";
  let media = $state("(min-width: 640px)");
  const query = new MediaQuery(() => media);
Media query {media} is currently {screen.matches}
<select bind:value={media}>
  <option value="(min-width: 640px)">640px</option>
  <option value="(min-width: 320px)">320px</option>

© 2024 Svecosystem Team