Svelte CSS media queries 🐥

Demo - Svelte REPL

Lightweight, comfortable, like Svelte🐣

how to install

npm i svelte-media-queries

how to use

Query? Yes, just like in CSS🙊

query='(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

Slot

<script>
  import MediaQuery from 'svelte-media-queries'
</script>

<MediaQuery query='(max-width: 480px)' let:matches>
  {#if matches}
    mobile!!
  {/if}
</MediaQuery>

Bind

<script>
  import MediaQuery from 'svelte-media-queries'

  let matches
</script>

<MediaQuery query='(max-width: 480px)' bind:matches/>

{#if matches}
  mobile!!
{/if}

{#if matches}
  Oh my God, it's really mobile
{/if}

That's not all!

You can use an array from query

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

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

matches=[boolean, boolean]

You can test this in Svelte REPL🐥

Example

<script>
  import MediaQuery from 'svelte-media-queries'
</script>

<MediaQuery query={['(max-width: 768px)', '(min-width: 768px) and (max-width: 1280px)', '(min-width: 1280px)']} let:matches>
  {@const [mobile, tablet, desktop] = matches}
  <h5>
    mobile: '(max-width: 768px)' = {mobile}
    tablet: '(max-width: 1280px)' = {tablet}
    desktop: '(min-width: 1280px)' = {desktop}
  </h5>
</MediaQuery>

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