svelte-media-store

A utility library to use media query as stores.

Usage

mediaStore is a function taking three arguments:

• a media query
• the value to return if true (default: true)
• the value to return if false (default: false)

Example

import mediaStore from "@arzidava/svelte-media-store";

const mobile = mediaStore("(max-width: 400px)", 400, 0);

With this store $mobile will return 400 on screens smaller than 400px and 0 on larger.

Prefers reduced motion

For accessibility reasons it is often required to set the duration of animations to 0. Because of this a special store reduced is available to simply wraps this specific query:

<script>
    import { reduced } from '@arzidava/svelte-media-store';
    const duration = reduced(500, 0)
</script>

<div in:slide={{ duration: $duration }}>...</div>

Prefers Dark Mode

Another convenience store is for prefers-color-scheme: dark

import { darkmode } from "@arzidava/svelte-media-store";
const isDark = darkmode();

Use with SvelteKit

The store relies on window.matchMedia to provide it's values, but during SSR window is not defined and therefore the code cannot run. It does need to have a value though, so it will default to the false parameter.

This can cause some flickering if the server renders with false and the page renders with true, if possible add a browser check for SvelteKit.

Demo

Repl