svelte-mediaquery

Conditionally rendering code fragments based on screen resolution, using media query.

Usage

Svelte 3

import { MediaQuery } from '$lib/components/MediaQuery.svelte';

<MediaQuery query="(min-width: 1200px)" let:matches>
    {#if matches}
    ...
    {/if}
</MediaQuery>

Svelte 5 with runes

import { useMediaQuery } from '$lib/helpers/mediaQuery.js';

const isWide = useMediaQuery('(width > 992px)');
const prefersDark = useMediaQuery('(prefers-color-scheme: dark)');

{#if $isWide}
    <p>Wide screen</p>
{/if}

{#if $prefersDark}
    <p>Dark mode user</p>
{/if}

License

Copyright 2025 Rodolfo González González

Licensed under Apache License version 2.0. Read the LICENSE file.