Svelte CSS media queries 🐥
Demo - Svelte REPL
Lightweight, comfortable, like Svelte🐣 | Svelte store / Svelte component
With TypeScript support💙
how to install
npm i svelte-media-queries
What can I do?
query = {
"mobile": "(max-width: 480px)",
"tablet": "(min-width: 480px) and (max-width: 768px)",
"largeTablet": "(min-width: 768px) and (max-width: 1200px)",
"desktop": "(min-width: 1200px)",
"other": [
"(min-width: 1200px)",
"(max-height: 900px)"
],
"themes": {
"dark": "(prefers-color-scheme: dark)",
"light": "(prefers-color-scheme: light)"
}
} //
matches = {
"mobile": false,
"tablet": true,
"largeTablet": false,
"desktop": false,
"other": [
false,
true
],
"themes": {
"dark": false,
"light": true
}
}
Yes, yes, and it's all recursive and reactive🐹
Try it in Svelte REPL
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
Store
<script>
import { onDestroy } from 'svelte'
import { createMediaStore } from 'svelte-media-queries'
const matches = createMediaStore(query) //The type of the store will completely repeat the query
onDestroy(() => matches.destroy()) //Stop events for calculation
</script>
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🐥