Network status

Allows tracking network status with Events and Stores.

INFO

Uses Navigator.onLine, Window: online event and Window: offline event under the hood

Usage

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

const { online, offline, $online, $offline } = trackNetworkStatus({
  setup: appStarted,
});

Returns an object with:

• online: Event that fires on connection restore
• offline: Event that fires on connection loss
• $online: Store with true if connection is restored and false if connection is lost
• $offline: Store with true if connection is lost and false if connection is restored

TIP

It supports @@trigger protocol. Since it allows firing only one Event trackNetworkStatus triggers online as a fired in case of @@trigger protocol.

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

somethingExpectsTrigger(trackNetworkStatus);

Live demo

Let us show you a live demo of how it works. The following demo displays a $online and $offilne values of the current network status. Turn off Wi-Fi to see how it works.

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

const appStarted = createEvent();

const { $online, $offline } = trackNetworkStatus({ setup: appStarted });

const [online, offline] = useUnit([$online, $offline]);

onMounted(appStarted);
</script>

<template>
  <p>
    Client online: <strong>{{ online }}</strong>
  </p>
  <p>
    Client offline: <strong>{{ offline }}</strong>
  </p>
</template>

Open Sandbox