@slidy/media

SSR compartible.

Try the [DEMO]

Getting started

Usage

Options
Queries

Getter

Cookie

Getting started 🚀

The package is available via [NPM]:

npm i -D @slidy/media

or 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"></script>
</head>

<script>
    let mediaQueries = null

    window.onload = () => media = Slidy.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>

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>