# svelte-media-queries

> A light and magical Svelte component for CSS media queries🐹

Latest version **1.6.2** (published 2023-10-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install svelte-media-queries
pnpm add svelte-media-queries
yarn add svelte-media-queries
bun add svelte-media-queries
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.6.2 |
| Published | 2023-10-13 |
| First published | 2022-06-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 16.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 42 |
| Author | Nikita Fedorov |
| Maintainers | fedorovvvv |
| Keywords | svelte, light, media-query, media-queries, css, css-in-svelte, media, query, queries, sveltejs, svelte-media-queries, svelte-queries, svelte-media, svelte-media-query, svelte-v3, svelte3 |

## Links

- npm: https://www.npmjs.com/package/svelte-media-queries
- Repository: https://github.com/fedorovvvv/svelte-media-queries
- Homepage: https://github.com/fedorovvvv/svelte-media-queries#readme
- Issues: https://github.com/fedorovvvv/svelte-media-queries/issues
- npm.io page: https://npm.io/package/svelte-media-queries

## Alternatives

- [gamedig](https://npm.io/package/gamedig.md) — 29.3K weekly downloads
- [join-monster](https://npm.io/package/join-monster.md) — 12.8K weekly downloads
- [masked](https://npm.io/package/masked.md) — 5.5K weekly downloads
- [@comunica/actor-query-process-explain-logical](https://npm.io/package/@comunica/actor-query-process-explain-logical.md) — 4.7K weekly downloads
- [@veracity/vui](https://npm.io/package/@veracity/vui.md) — 4.6K weekly downloads

## Recent versions

- 1.6.2 (latest) — 2023-10-13
- 1.6.1 — 2023-09-06
- 1.5.4 — 2023-02-20
- 1.5.2 — 2023-01-14
- 1.5.1 — 2022-12-21
- 1.4.4 — 2022-12-21
- 1.4.3 — 2022-12-21
- 1.4.2 — 2022-12-21
- 1.4.1 — 2022-12-20
- 1.4.0 — 2022-09-18
- 1.3.7 — 2022-09-05
- 1.3.6 — 2022-09-05
- 1.3.5 — 2022-07-04
- 1.3.4 — 2022-06-23
- 1.3.3 — 2022-06-23
- … 15 more at https://npm.io/package/svelte-media-queries/versions

## README

# Svelte CSS media queries 🐥 

[![npm version](http://img.shields.io/npm/v/svelte-media-queries.svg)](https://www.npmjs.com/package/svelte-media-queries)
[![npm downloads](https://img.shields.io/npm/dm/svelte-media-queries.svg)](https://www.npmjs.com/package/svelte-media-queries)
![license](https://img.shields.io/npm/l/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💙  

[![Rate this package](https://badges.openbase.com/js/rating/svelte-media-queries.svg?style=openbase&token=myaBaR9V2YuM2LLiUs0nOTMlrXb1fGC6F9XuQa3Y0sw=)](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
  }
}
```
<img src="https://media.giphy.com/media/oYtVHSxngR3lC/giphy-tumblr.gif" width="350"/>

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
<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>
```
[query example](https://github.com/fedorovvvv/svelte-media-queries#what-can-i-do)
#### Slot
```svelte
<script>
  import MediaQuery from 'svelte-media-queries'
</script>

<MediaQuery query='(max-width: 480px)' let:matches>
  {#if matches}
    mobile!!
  {/if}
</MediaQuery>
```
#### Bind
```svelte
<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`
```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
<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](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🐥

---
_Source: https://npm.io/package/svelte-media-queries · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._