[](https://www.npmjs.com/package/@slidy/media)
[](https://bundlephobia.com/package/@slidy/media)
[](https://www.npmjs.com/package/@slidy/media)
[](https://www.npmjs.com/package/@slidy/media)
[](https://github.com/Valexr/slidy/issues)
# @slidy/media
Simple, observable & cookie-persisted media-query store enspired by svelte/stores.
SSR compartible.
#### Try the [DEMO]
> - [Getting started](#getting-started-)
> - [Usage](#usage)
> - [Options](#options)
> - [Queries](#queries)
> - [Getter](#getter)
> - [Cookie](#cookie)
## Getting started 🚀
The package is available via [NPM]:
```sh
npm i -D @slidy/media
```
or from [CDN]:
```html
```
## Usage
Function `media({ queries, getter, cookie })` is available via named import as `MJS/CJS` module or via global `Window.Slidy` object props as `IIFE`.
### MJS/CJS module import
```html
```
### IIFE as `Window` Object
```html
```
### As third party module in any frameworks
```svelte
```
## Options
All arguments are optional, only `queries` required.
```ts
interface Options {
queries?: Queries,
getter?: Getter,
cookie?: boolean
}
```
### Queries
Media queries rules object like `{ dark: '(prefers-color-scheme: dark)' }`. Support multiple conditions like `'(max-width: 840px) or (prefers-color-scheme: light)'` more `@media` rules on [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@media#logical_operators)
```ts
type Queries = {
[key: string]: boolean | string | undefined;
};
```
```html
```
### Getter
Callback function with matches object results.
```ts
type Getter = (matches: Queries) => void
```
```html
```
### Cookie
Persist media-query matches object in browser cookie like JSON string. Cookie key `media`.
```ts
const cookie: boolean
```
```html
```
MIT © [Valexr](https://github.com/Valexr)
[DEMO]: https://svelte.dev/repl/e015c399d7b0442b9a75b71ede67fb61
[NPM]: https://www.npmjs.com/package/@slidy/media
[CDN]: https://unpkg.com/@slidy/media/
[REPL]: https://svelte.dev/repl/e015c399d7b0442b9a75b71ede67fb61