DEV Community

François-Emmanuel CORTES
François-Emmanuel CORTES

Posted on

2

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 />
Enter fullscreen mode Exit fullscreen mode

Registering inside store

$: ViewportSettingsStore.register ({ innerWidth, innerHeight })
Enter fullscreen mode Exit fullscreen mode

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 
}
Enter fullscreen mode Exit fullscreen mode

simple usage

Just import ViewportSettingsStore in your componentr

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

Et voilà... That's done.

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay