svelte-window-stores

A collection of stores that monitor the size, orientation, color scheme and scroll position of the browser window.

Compatible with Server-Side Rendering.

NPM Package

npm install svelte-window-stores

Documentation

Highlights

• Check the user's preferred color scheme:

<script>
    import {ColorScheme, prefersColorScheme} from 'svelte-window-stores/appearance';
</script>

You prefer {$prefersColorScheme === ColorScheme.Dark ? 'dark' : 'light'} mode!

• Use responsive media query in your code:

<script>
    import {makeScreenSizeStore} from 'svelte-window-stores/viewport';

    export const screenSize = makeScreenSizeStore({
        names: ['sm', 'md', 'lg'],
        thresholds: [768, 992],
    });
</script>

Your screen is categorized as {$screenSize.name}

• Show a "go to the top" button when the user scrolls down the page:

<script>
    import {scrollY} from 'svelte-window-stores/viewport';
</script>

<button
    type="button"
    style="position: fixed; bottom: 0; right: 0; display: {$scrollY > 10 ? 'inline-block' : 'none'}"
    >Go to the top</button
>

• Automatically go full screen when the user rotates their device:

<script>
    import {orientation, Orientation} from 'svelte-window-stores/viewport';

    let fullScreenElement;

    let previousOrientation = $orientation;
    /** @type {'exit'|'enter'|null}*/
    let btnAction = null;
    $: handleOrientationChange($orientation);
    function handleOrientationChange(currentOrientation) {
        if (
            previousOrientation === Orientation.Portrait &&
            currentOrientation === Orientation.Landscape
        ) {
            if (!document.fullscreenElement) {
                btnAction = 'enter';
            }
        } else if (
            previousOrientation === Orientation.Landscape &&
            currentOrientation === Orientation.Portrait
        ) {
            if (document.fullscreenElement) {
                btnAction = 'exit';
            }
        }
        previousOrientation = currentOrientation;
    }
    function handleBtnAction() {
        if (btnAction === 'enter') {
            fullScreenElement?.requestFullscreen();
        } else {
            document.exitFullscreen();
        }
        btnAction = null;
    }
</script>

<div bind:this={fullScreenElement} style="position: relative; background: white; color: black;">
    Some content here and there

    <button
        type="button"
        on:click={handleBtnAction}
        style="display: {btnAction
            ? 'inline-block'
            : 'none'};position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%)"
        >{btnAction === 'exit' ? 'Exit' : 'Enter'} full screen</button
    >
</div>

A possible use case for $viewportSize

<script>
    import {viewportSize} from 'svelte-window-stores/viewport';
</script>

<div style="background-color: blue; color: white; width: 100%; height: {$viewportSize.height}px">
    This DIV height takes into account collapsible navigation menus and/or the search bar on a mobile
    browser.
</div>
<div style="background: linear-gradient(orange, black); width: 100%; height: 1000vh">Filler</div>