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 BiewportSettingsStore, they are presented in this topic.

Grabbing viewportportinner 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.

The above is the detailed content of SvelteKit responsive helper. For more information, please follow other related articles on the PHP Chinese website!