https://github.com/pearofducks/svelte-match-media

a matchMedia plugin for svelte 3
https://github.com/pearofducks/svelte-match-media

matchmedia svelte svelte-v3

Last synced: 9 days ago
JSON representation

a matchMedia plugin for svelte 3

• Host: GitHub
• URL: https://github.com/pearofducks/svelte-match-media
• Owner: pearofducks
• License: mit
• Created: 2019-09-05T19:35:12.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2021-03-31T14:01:11.000Z (over 3 years ago)
• Last Synced: 2024-10-10T21:21:12.162Z (30 days ago)
• Topics: matchmedia, svelte, svelte-v3
• Language: JavaScript
• Homepage:
• Size: 51.8 KB
• Stars: 38
• Watchers: 5
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# svelte-match-media

a matchMedia plugin for svelte 3

## install

```console

npm install --save-dev svelte-match-media

```

```console

yarn add --dev svelte-match-media

```

## use

First, in your `main.js`, set up your media queries

```js

import { setup } from 'svelte-match-media'

setup({

  desktop: 'screen and (min-width: 769px)',

  mobile: 'screen and (max-width: 768px)'

})

// or if those are the exact media queries you want, just call setup()

```

Then use your media queries in your svelte components

```js

import { media } from 'svelte-match-media'

  {#if $media.desktop}

    

  {/if}

```

## api

#### queries (argument)

All `queries` specified below should be an object of the form `{ mediaName: mediaQuery }`

#### `setup(queries)`

This sets up a Svelte store on the `media` export with `queries` mapped to their `window.matchMedia` result

#### `media`

The store initialized by `setup` above

#### `createMedia(queries)`

If you'd like to compartmentalize your media queries, or for whatever reason create multiple stores, this will create a standalone `media` object