https://github.com/fedorovvvv/svelte-media-queries
A ✨light✨ and magical Svelte component for CSS media queries🐹
https://github.com/fedorovvvv/svelte-media-queries
css css-media css-media-queries media media-query queries query svelte svelte-component svelte-v3 svelte3 sveltejs
Last synced: 3 months ago
JSON representation
A ✨light✨ and magical Svelte component for CSS media queries🐹
- Host: GitHub
- URL: https://github.com/fedorovvvv/svelte-media-queries
- Owner: fedorovvvv
- License: mit
- Created: 2022-06-15T17:24:37.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-10-13T16:19:27.000Z (over 1 year ago)
- Last Synced: 2024-09-29T11:58:53.995Z (8 months ago)
- Topics: css, css-media, css-media-queries, media, media-query, queries, query, svelte, svelte-component, svelte-v3, svelte3, sveltejs
- Language: TypeScript
- Homepage: https://svelte.dev/repl/7e97f1a1d1654701a0661e076037d160?version=3.48.0
- Size: 268 KB
- Stars: 37
- Watchers: 2
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Svelte CSS media queries 🐥
[](https://www.npmjs.com/package/svelte-media-queries)
[](https://www.npmjs.com/package/svelte-media-queries)
### [Demo - Svelte REPL](https://svelte.dev/repl/7e97f1a1d1654701a0661e076037d160?version=3.48.0)
### Lightweight, comfortable, like Svelte🐣 | Svelte store / Svelte component
With TypeScript support💙
[](https://openbase.com/js/svelte-media-queries?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge)
## how to install
```npm
npm i svelte-media-queries
```
### What can I do?
```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](https://svelte.dev/repl/7e97f1a1d1654701a0661e076037d160?version=3.48.0)
## How to use
### Query? Yes, just like in CSS🙊
```js
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
```js
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
```
[query example](https://github.com/fedorovvvv/svelte-media-queries#what-can-i-do)
#### Slot
```svelte
import MediaQuery from 'svelte-media-queries'
{#if matches}
mobile!!
{/if}
```
#### Bind
```svelte
import MediaQuery from 'svelte-media-queries'
let 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`
```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](https://svelte.dev/repl/7e97f1a1d1654701a0661e076037d160?version=3.48.0)🐥
#### Example
```svelte
import MediaQuery from 'svelte-media-queries'
{@const [mobile, tablet, desktop] = matches}
mobile: '(max-width: 768px)' = {mobile}
tablet: '(max-width: 1280px)' = {tablet}
desktop: '(min-width: 1280px)' = {desktop}
```
`{@const}` - [Svelte Docs](https://svelte.dev/docs#template-syntax-const)🐹
You can also use it through the array index `tablet = matches[1]`
With `bind:`, everything is the same🐥