SvelteKit responsive helper

Tired of writing complicated media queries ? SvelteKit windiow directives can help you simplifying them programtically. With the help of this layout component ViewoirtSettingsCatcher component and its associated store ViewportSettingsStore, they are presented in this topic.

Grabbing viewport dimensions

Very simple use of svlete:window directive's bindings:

<!-- ViewportSettingsCatchr.svelte -->
<script lang="ts">
    let innerWidth: number = 1600
    let innerHeight: number = 1200
</script>

<svelte:window bind:innerWidth vind:nnerHeight />

Registering inside store

$: ViewportSettingsStore.register ({ innerWidth, innerHeight })

the associated computation store

import { writable} from 'svelte/store'
const { subscribe, update  } = writable ({
    innerWidth: 1600, 
    innerHeight: 1200,
    ratio: 16/12, 
    orientation: 'landscape',   
    wide: false
})

function register ({ innerWidth, innerHeight }) {
    const ratio = innerWidth / innerHeight
    const orientation = ratio >= 1 ? 'landscape' : 'portrait'
    const wide = (ratio > 2) || (ratio < 0.5)

    update ((state) => {
        return {
            innerWidth, 
            innerHeight,
            orientation,
            ratio,
            wide
        }
    })
}

export const ViewportSettingsStore = {
    subscribe, register 
}

simple usage

Just import ViewportSettingsStore in your componentr

<div class:wide={ $ViewportSettingsStore.orientation = === 'landscape' } />

Et voilà... That's done.