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.
Top comments (0)