@dvcol/svelte-utils/dist/media.svelte.js

Svelte library for common utility functions and constants

import { onDestroy } from 'svelte';
export const useWatchMedia = (query, callback, options) => {
    const media = window.matchMedia(query);
    let matches = $state(media.matches);
    const listener = (event) => {
        matches = event.matches;
        callback?.(event);
    };
    media.addEventListener('change', listener, options);
    const destroy = () => media.removeEventListener('change', listener, options);
    onDestroy(() => destroy());
    return {
        media,
        matches: () => matches,
        destroy,
    };
};