Svelte Media Query Store

Provides you with a reactive store for checking CSS media queries and breakpoint matcher that keep track of the matching state of the given media queries .

Features

• CSS Media Queries Matcher - Takes a string query, such as (min-width: 800px) and returns a readable store.
• Breakpoint Matcher : Takes object with breakpoint as a key and a string query as a value and observes browser changes accordingly and returns the matching breakpoint.

Installation

1$ npm i svelte-media-query-store

Usage

Breakpoint Matcher

Takes object with breakpoint as a key and a string query as a value and observes browser changes accordingly and returns the matching breakpoint.

1<script lang="ts">
2  import { derived } from 'svelte/store';
3  import { breakpointMatcher } from './lib/store';
4
5  //for breakpoint matcher
6  //tailwind breakpoints
7  const breakpoints: Record<string, string> = {
8    'sm': '(min-width: 640px)',
9    'md': '(min-width: 768px)',
10    'lg': '(min-width: 1024px)',
11    'xl': '(min-width: 1280px)',
12    '2xl': '(min-width: 1536px)'
13  };
14
15  const currentBreakpointMatcher = breakpointMatcher(breakpoints);
16
17  // use derived store for conditions so it can be reactive
18  const isXl = derived(currentBreakpointMatcher, ($currentBreakpointMatcher) => {
19    return $currentBreakpointMatcher === 'xl';
20  });
21</script>
22
23<h1>Breakpoint Matcher</h1>
24<h2>Current Breakpoint: <b>{ $currentBreakpointMatcher }</b></h2>
25<h2>IsXL: {$isXl}</h2>
26

CSS Media Queries Matcher

The package takes a string query, such as (min-width: 800px) and returns a readable store.

In frontend

1<script lang="ts">
2  import {mediaQueryStore} from 'svelte-media-query-store';
3
4  const isMobile = mediaQueryStore("(max-width: 600px)");
5</script>
6
7<h2>{$isMobile}</h2> <!-- subscribing to the readable store --->

In Store

store.ts

1## store.ts
2import { mediaQueryStore } from 'svelte-media-query-store';
3
4export const md = mediaQueryStore('(min-width: 768px)');
5
6export const lg = mediaQueryStore('(min-width: 1024px)');
7

App.svelte

1<script lang="ts">
2  import { md,lg } from '$lib/store'; //
3</script>
4
5<h2>md: {$md}</h2>
6<h2>lg: {$lg}</h2>
7

Example

• https://stackblitz.com/edit/vitejs-vite-xdvbuz?file=README.md

Author

• Michael Belete [https://github.com/michaelbelete]