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: about 2 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 (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-10-13T16:19:27.000Z (11 months ago)
• Last Synced: 2024-07-27T11:02:24.392Z (about 2 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: 36
• Watchers: 2
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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

  }

}

```



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🐥