@slidy/media
Simple, observable & cookie-persisted media-query store enspired by svelte/stores.
SSR compartible.
Try the DEMO
Getting started 🚀
The package is available via NPM:
npm i -D @slidy/mediaor from CDN:
<script src="https://unpkg.com/@slidy/media"></script>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
<head>
<script type="module">
import { media as mediaStore } from 'https://unpkg.com/@slidy/media/dist/index.mjs'; // MJS module
// OR
import { media as mediaStore } from 'https://unpkg.com/@slidy/media/dist/index.cjs'; // CJS module
const media = mediaStore()
</script>
</head>IIFE as Window Object
<head>
<script src="https://unpkg.com/@slidy/media/dist/index.js"></script>
</head>
<script>
let mediaQueries = null
window.onload = () => media = SlidyMedia.media()
</script>As third party module in any frameworks
<!-- Svelte -->
<script>
import { media as mediaStore } from '@slidy/media';
const media = mediaStore()
$: console.log($media)
</script>Options
All arguments are optional, only queries required.
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
type Queries = {
[key: string]: boolean | string | undefined;
};<head>
<script type="module">
import { media as mediaStore } from 'https://unpkg.com/@slidy/media/dist/index.mjs';
const queries: MediaQuery = {
xs: '(max-width: 480px)',
sm: '(max-width: 600px)',
md: '(max-width: 840px)',
lg: '(max-width: 960px)',
xl: '(max-width: 1280px)',
xxl: '(min-width: 1281px)',
landscape: '(orientation: landscape)',
portrait: '(orientation: portrait)',
dark: '(prefers-color-scheme: dark)',
light: '(prefers-color-scheme: light)',
mouse: '(hover: hover)',
touch: '(hover: none)'
}
const media = mediaStore({ queries })
</script>
</head>Getter
Callback function with matches object results.
type Getter = (matches: Queries) => void<head>
<script type="module">
import { media as mediaStore } from 'https://unpkg.com/@slidy/media/dist/index.mjs';
const getter = (mqs) => console.log(mqs)
const media = mediaStore({ getter })
</script>
</head>Cookie
Persist media-query matches object in browser cookie like JSON string. Cookie key media.
const cookie: boolean<head>
<script type="module">
import { media as mediaStore } from 'https://unpkg.com/@slidy/media/dist/index.mjs';
const media = mediaStore({ cookie: true })
</script>
</head>MIT © Valexr