Svelte Media Observer

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

Try it in the Svelte REPL.

Getting started

The package is available via npm:

npm i svelte-media-observer

Usage

1import { mediaObserver } from "svelte-media-observer";
2import type { MediaQueries } from "svelte-media-observer";
3
4const mediaQueries: MediaQueries<"small" | "medium" | "dark"> = [
5  [ "small", "(max-width: 640px)" ],
6  [ "medium", "(max-width: 935px)" ],
7  [ "dark", "(prefers-color-scheme: dark)" ]
8];
9
10export 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:

1<script>
2  import { media } from "your-observer-path";
3</script>
4
5{#if $media.small}
6  <NavMobile />
7{:else}
8  <NavDesktop />
9{/if}

Note

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

Issues

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

1<script>
2  import { media } from "your-observer-path";
3</script>
4
5// incorrect no-unsafe-member-access error
6{#if $media.small}
7  <NavMobile />
8{:else}
9  <NavDesktop />
10{/if}

Attribution

Observer alien was created by FreakAddL.