Skip to main content

svelte/reactivity/window

This module exports reactive versions of various window values, each of which has a reactive current property that you can reference in reactive contexts (templates, deriveds and effects) without using <svelte:window> bindings or manually creating your own event listeners.

<script>
	import { innerWidth, innerHeight } from 'svelte/reactivity/window';
</script>

<p>{innerWidth.current}x{innerHeight.current}</p>
import {
	
const devicePixelRatio: {
    readonly current: number | undefined;
}

devicePixelRatio.current is a reactive view of window.devicePixelRatio. On the server it is undefined. Note that behaviour differs between browsers — on Chrome it will respond to the current zoom level, on Firefox and Safari it won’t.

@since5.11.0
devicePixelRatio
,
const innerHeight: ReactiveValue<number | undefined>

innerHeight.current is a reactive view of window.innerHeight. On the server it is undefined.

@since5.11.0
innerHeight
,
const innerWidth: ReactiveValue<number | undefined>

innerWidth.current is a reactive view of window.innerWidth. On the server it is undefined.

@since5.11.0
innerWidth
,
const online: ReactiveValue<boolean | undefined>

online.current is a reactive view of navigator.onLine. On the server it is undefined.

@since5.11.0
online
,
const outerHeight: ReactiveValue<number | undefined>

outerHeight.current is a reactive view of window.outerHeight. On the server it is undefined.

@since5.11.0
outerHeight
,
const outerWidth: ReactiveValue<number | undefined>

outerWidth.current is a reactive view of window.outerWidth. On the server it is undefined.

@since5.11.0
outerWidth
,
const screenLeft: ReactiveValue<number | undefined>

screenLeft.current is a reactive view of window.screenLeft. It is updated inside a requestAnimationFrame callback. On the server it is undefined.

@since5.11.0
screenLeft
,
const screenTop: ReactiveValue<number | undefined>

screenTop.current is a reactive view of window.screenTop. It is updated inside a requestAnimationFrame callback. On the server it is undefined.

@since5.11.0
screenTop
,
const scrollX: ReactiveValue<number | undefined>

scrollX.current is a reactive view of window.scrollX. On the server it is undefined.

@since5.11.0
scrollX
,
const scrollY: ReactiveValue<number | undefined>

scrollY.current is a reactive view of window.scrollY. On the server it is undefined.

@since5.11.0
scrollY
} from 'svelte/reactivity/window';

devicePixelRatio

Available since 5.11.0

devicePixelRatio.current is a reactive view of window.devicePixelRatio. On the server it is undefined. Note that behaviour differs between browsers — on Chrome it will respond to the current zoom level, on Firefox and Safari it won’t.

const devicePixelRatio: {
	get current(): number | undefined;
};

innerHeight

Available since 5.11.0

innerHeight.current is a reactive view of window.innerHeight. On the server it is undefined.

const innerHeight: ReactiveValue<number | undefined>;

innerWidth

Available since 5.11.0

innerWidth.current is a reactive view of window.innerWidth. On the server it is undefined.

const innerWidth: ReactiveValue<number | undefined>;

online

Available since 5.11.0

online.current is a reactive view of navigator.onLine. On the server it is undefined.

const online: ReactiveValue<boolean | undefined>;

outerHeight

Available since 5.11.0

outerHeight.current is a reactive view of window.outerHeight. On the server it is undefined.

const outerHeight: ReactiveValue<number | undefined>;

outerWidth

Available since 5.11.0

outerWidth.current is a reactive view of window.outerWidth. On the server it is undefined.

const outerWidth: ReactiveValue<number | undefined>;

screenLeft

Available since 5.11.0

screenLeft.current is a reactive view of window.screenLeft. It is updated inside a requestAnimationFrame callback. On the server it is undefined.

const screenLeft: ReactiveValue<number | undefined>;

screenTop

Available since 5.11.0

screenTop.current is a reactive view of window.screenTop. It is updated inside a requestAnimationFrame callback. On the server it is undefined.

const screenTop: ReactiveValue<number | undefined>;

scrollX

Available since 5.11.0

scrollX.current is a reactive view of window.scrollX. On the server it is undefined.

const scrollX: ReactiveValue<number | undefined>;

scrollY

Available since 5.11.0

scrollY.current is a reactive view of window.scrollY. On the server it is undefined.

const scrollY: ReactiveValue<number | undefined>;

Edit this page on GitHub

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy