Svelte CSS media queries 🐥

Demo - Svelte REPL

Lightweight, comfortable, like Svelte🐣 | Svelte store / Svelte component

With TypeScript support💙

how to install

1npm i svelte-media-queries

What can I do?

1query = {
2  "mobile": "(max-width: 480px)",
3  "tablet": "(min-width: 480px) and (max-width: 768px)",
4  "largeTablet": "(min-width: 768px) and (max-width: 1200px)",
5  "desktop": "(min-width: 1200px)",
6  "other": [
7    "(min-width: 1200px)",
8    "(max-height: 900px)"
9  ],
10  "themes": {
11    "dark": "(prefers-color-scheme: dark)",
12    "light": "(prefers-color-scheme: light)"
13  }
14} // 

1matches = {
2  "mobile": false,
3  "tablet": true,
4  "largeTablet": false,
5  "desktop": false,
6  "other": [
7    false,
8    true
9  ],
10  "themes": {
11    "dark": false,
12    "light": true
13  }
14}

Yes, yes, and it's all recursive and reactive🐹
Try it in Svelte REPL

How to use

Query? Yes, just like in CSS🙊

1query='(min-width: 768px) and (max-width: 1280px)'

Matches? This is your result

Component (bind: directive)

bind:matches
------------------
bind:matches={foo}

Slot (let: directive)

let:matches
------------------
let:matches={foo}

Examples

Store

1<script>
2  import { onDestroy } from 'svelte'
3  import { createMediaStore } from 'svelte-media-queries'
4  
5  const matches = createMediaStore(query) //The type of the store will completely repeat the query
6  
7  onDestroy(() => matches.destroy()) //Stop events for calculation
8</script>

query example

Slot

1<script>
2  import MediaQuery from 'svelte-media-queries'
3</script>
4
5<MediaQuery query='(max-width: 480px)' let:matches>
6  {#if matches}
7    mobile!!
8  {/if}
9</MediaQuery>

Bind

1<script>
2  import MediaQuery from 'svelte-media-queries'
3
4  let matches
5</script>
6
7<MediaQuery query='(max-width: 480px)' bind:matches/>
8
9{#if matches}
10  mobile!!
11{/if}
12
13{#if matches}
14  Oh my God, it's really mobile
15{/if}

That's not all!

You can use an array from query

1query={['(max-width: 1200px)', '(min-width: 800px)']}

What about matches?
Matches will take everything from query in order

1matches=[boolean, boolean]

You can test this in Svelte REPL🐥

Example

1<script>
2  import MediaQuery from 'svelte-media-queries'
3</script>
4
5<MediaQuery query={['(max-width: 768px)', '(min-width: 768px) and (max-width: 1280px)', '(min-width: 1280px)']} let:matches>
6  {@const [mobile, tablet, desktop] = matches}
7  <h5>
8    mobile: '(max-width: 768px)' = {mobile}
9    tablet: '(max-width: 1280px)' = {tablet}
10    desktop: '(min-width: 1280px)' = {desktop}
11  </h5>
12</MediaQuery>

{@const} - Svelte Docs🐹
You can also use it through the array index tablet = matches[1]
With bind:, everything is the same🐥