# Svelte Media Observer
Svelte Media observer is small utility media queries observer built for [Svelte](https://svelte.dev/) framework.
Try it in the [Svelte REPL](https://svelte.dev/repl/e9f6a16dfd9a4013b1a0a76347b206eb?version=3).
## Getting started
The package is available via [npm](https://www.npmjs.com/package/svelte-media-observer):
```
npm i svelte-media-observer
```
## Usage
```ts
import { mediaObserver } from "svelte-media-observer";
import type { MediaQueries } from "svelte-media-observer";
const mediaQueries: MediaQueries<"small" | "medium" | "dark"> = [
[ "small", "(max-width: 640px)" ],
[ "medium", "(max-width: 935px)" ],
[ "dark", "(prefers-color-scheme: dark)" ]
];
export const media = mediaObserver(mediaQueries);
```
observer contains all named media queries as `Record`. It is build on [svelte/stores](https://svelte.dev/docs#svelte_store), so the usage is the same:
```html
{#if $media.small}
{:else}
{/if}
```
## Note
It is a nice idea to create several observers depending on your need and the rate the media queries will change.
## Issues
While using Typescript and ESLint for Svelte, you might meet some [limitations](https://github.com/sveltejs/eslint-plugin-svelte3#installation-with-typescript) to type-aware rules. [Link](https://github.com/sveltejs/eslint-plugin-svelte3/issues/89) to the issue.
```html
// incorrect no-unsafe-member-access error
{#if $media.small}
{:else}
{/if}
```
## Attribution
Observer alien was created by [FreakAddL](https://t.me/portfolio_e_g).
