Window dimensions

Allows tracking window dimensions with Events and Stores.

INFO

Uses Window: resize event, Window: scroll event, Window: requestAnimationFrame under the hood

Usage

All you need to do is to create an integration by calling trackWindowDimensions with an integration options:

• setup: after this Event all listeners will be installed, and the integration will be ready to use; it is required because it is better to use explicit initialization Event in the application.
• teardown?: after this Event all listeners will be removed, and the integration will be ready to be destroyed.

import { trackWindowDimensions } from '@withease/web-api';

const {
  $scrollY,
  $scrollX,
  $innerWidth,
  $innerHeight,
  $outerWidth,
  $outerHeight,
  $screenLeft,
  $screenTop,
} = trackWindowDimensions({
  setup: appStarted,
});

Returns an object with:

• $scrollY: Store with the current scroll position on the Y-axis
• $scrollX: Store with the current scroll position on the X-axis
• $innerWidth: Store with the current width of the viewport
• $innerHeight: Store with the current height of the viewport
• $outerWidth: Store with the current width of the entire window
• $outerHeight: Store with the current height of the entire window
• $screenLeft: Store with the current left position of the screen
• $screenTop: Store with the current top position of the screen

Live demo

Let us show you a live demo of how it works. The following demo displays a $scrollX, $innerWidth, $innerHeight, $outerWidth, $outerHeight, $screenLeft, and $screenTop values of the current window dimensions. Scroll, resize, and move the window to see how it works.

<script setup>
import { trackWindowDimensions } from '@withease/web-api';
import { createEvent } from 'effector';
import { useUnit } from 'effector-vue/composition';
import { onMounted } from 'vue';

const appStarted = createEvent();

const {
  $scrollX,
  $scrollY,
  $innerWidth,
  $innerHeight,
  $outerWidth,
  $outerHeight,
  $screenTop,
  $screenLeft,
} = trackWindowDimensions({
  setup: appStarted,
});

const {
  scrollX,
  scrollY,
  innerWidth,
  innerHeight,
  outerWidth,
  outerHeight,
  screenTop,
  screenLeft,
} = useUnit({
  $scrollX,
  $scrollY,
  $innerWidth,
  $innerHeight,
  $outerWidth,
  $outerHeight,
  $screenTop,
  $screenLeft,
});

onMounted(appStarted);
</script>

<template>
  <div class="wrapper">
    <h2>Window</h2>
    <p>
      scrollX: <strong>{{ scrollX }}</strong>
    </p>
    <p>
      scrollY: <strong>{{ scrollY }}</strong>
    </p>
    <p>
      innerWidth: <strong>{{ innerWidth }}</strong>
    </p>
    <p>
      innerHeight: <strong>{{ innerHeight }}</strong>
    </p>
    <p>
      outerWidth: <strong>{{ outerWidth }}</strong>
    </p>
    <p>
      outerHeight: <strong>{{ outerHeight }}</strong>
    </p>
    <p>
      screenLeft: <strong>{{ screenLeft }}</strong>
    </p>
    <p>
      screenTop: <strong>{{ screenTop }}</strong>
    </p>
  </div>
</template>

<style lang="css" scoped>
.wrapper {
  min-width: 150vw;
  min-height: 150vh;
}
</style>

Open Sandbox