Svelte Media observer is small utility media queries observer built for Svelte framework.

Try it in the Svelte REPL.

The package is available via npm:

npm i svelte-media-observer

import { mediaObserver } from "svelte-media-observer";
import type { MediaQueries } from "svelte-media-observer";
const mediaQueries: MediaQueries<"small" | "medium" | "dark"> = [
  [ "small", "(max-width: 640px)" ],
  [ "medium", "(max-width: 935px)" ],
  [ "dark", "(prefers-color-scheme: dark)" ]
];
export const media = mediaObserver(mediaQueries);

observer contains all named media queries as Record<breakpointName: string, queryMatch: boolean>. It is build on svelte/stores, so the usage is the same:

<script>
  import { media } from "your-observer-path";
</script>
{#if $media.small}
  <NavMobile />
{:else}
  <NavDesktop />
{/if}

It is a nice idea to create several observers depending on your need and the rate the media queries will change.

While using Typescript and ESLint for Svelte, you might meet some limitations to type-aware rules. Link to the issue.

<script>
  import { media } from "your-observer-path";
</script>
// incorrect no-unsafe-member-access error
{#if $media.small}
  <NavMobile />
{:else}
  <NavDesktop />
{/if}

Observer alien was created by FreakAddL.