Svelte CSS media queries 🐥

!license

$3

$3

With TypeScript support💙


how to install

``npm
npm i svelte-media-queries
`

$3

`js
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)"
}
} //
`
`js
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

$3


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

$3

#### Component (bind: directive)
`
bind:matches
------------------
bind:matches={foo}
`
#### Slot (let: directive)
`
let:matches
------------------
let:matches={foo}
`

$3

#### Store
`js

`
query example
#### Slot
`svelte


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

`
#### Bind
`svelte


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

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

$3


#### You can use an array from query
`js
query={['(max-width: 1200px)', '(min-width: 800px)']}
`
What about matches?
Matches will take everything from query in order
`js
matches=[boolean, boolean]
`
#### You can test this in Svelte REPL🐥
#### Example
`svelte

{@const [mobile, tablet, desktop] = matches}

mobile: '(max-width: 768px)' = {mobile}
tablet: '(max-width: 1280px)' = {tablet}
desktop: '(min-width: 1280px)' = {desktop}

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