Package Exports

svelte-media-queries
svelte-media-queries/MediaQuery.svelte

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (svelte-media-queries) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Svelte CSS media queries 🐥

Demo - Svelte REPL

Lightweight, comfortable, like Svelte🐣

how to install

npm i svelte-css-mediaquery

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🐥

svelte-media-queries