Screen orientation

Allows tracking device screen orientation with Events and Stores.

INFO

Uses Screen Orientation API under the hood

Usage

All you need to do is to create an integration by calling trackScreenOrientation 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 { trackScreenOrientation } from '@withease/web-api';

const { $type, $angle, $portrait, $landscape } = trackScreenOrientation({
  setup: appStarted,
});

Returns an object with:

• $type: Store with current orientation type, one of "portrait-primary", "portrait-secondary", "landscape-primary", or "landscape-secondary"
• $angle: Store with a number which represents the current orientation angle in degrees
• $portrait: Store with a boolean which states if device is in portrait orientation
• $landscape: Store with a boolean which states if device is in landscape orientation

TIP

It supports @@trigger protocol. Since it allows firing only one Event trackScreenOrientation triggers any updates of $type as a fired in case of @@trigger protocol.

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

somethingExpectsTrigger(trackScreenOrientation);

Live demo

Let us show you a live demo of how it works. The following demo displays $type, $angle, $portrait and $landscape values of the current screen orientation. Rotate your device to see how it works.

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

const appStarted = createEvent();

const { $type, $angle, $portrait, $landscape } = trackScreenOrientation({
  setup: appStarted,
});

const [type, angle, portrait, landscape] = useUnit([
  $type,
  $angle,
  $portrait,
  $landscape,
]);

onMounted(appStarted);
</script>

<template>
  <p>
    Screen orientation type: <strong>{{ type }}</strong>
  </p>
  <p>
    Screen orientation angle: <strong>{{ angle }}</strong>
  </p>
  <p>
    Is device in portait orientation: <strong>{{ portrait }}</strong>
  </p>
  <p>
    Is device in landscape orientation: <strong>{{ landscape }}</strong>
  </p>
</template>

Open Sandbox