dev-resources.site

for different kinds of informations.

React Navigator Status

Published at

2/10/2021

Categories

react

navigator

online

offline

Author

lakhansamani

Main Article

https://dev.to/lakhansamani/react-navigator-status-3knd

Categories

4 categories in total

Author

12 person written this

React Navigator Status

Adding online/offline status to your application can make it more user intuitive and helps users in taking quick actions before interacting with the application. react-navigator-status exports a component and a hook that you can use to show online/offline alerts to your users.

Demo

This component is inspired by react-detect-offline. The major benefit of using this that instead of polling network status this component uses online and offline event listeners https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/Online_and_offline_events. Also, it is written in TypeScript and follows type-safe measures.

How to use?

Installation

Yarn: yarn add react-navigator-status
npm: npm install react-navigator-status

Usage

You can use this package in 3 ways

Default component
using the hook
using the render props with default component

1. Default Component

import * as React from 'react';
import { NavigatorStatus } from 'react-navigator-status';

const App = () => {
  return <NavigatorStatus />;
};

2. Using Hook

useNavigatorStatus hook returns the online status and listens to the network change in real time

import * as React from 'react';
import { useNavigatorStatus } from 'react-navigator-status';

// doesn't show alert initially
// show offline alert forever
// show online alert for 4s

const Alert: React.FC<{ isOnline: boolean }> = ({ isOnline }) => {
  const [showAlert, setShowAlert] = React.useState(false);

  React.useEffect(() => {
    let isMounted = true;

    if (isOnline && showAlert && isMounted) {
      setShowAlert(true);

      setTimeout(() => {
        if (isMounted) {
          setShowAlert(false);
        }
      }, 4000);
    }

    if (!isOnline && isMounted) {
      setShowAlert(true);
    }

    return () => {
      isMounted = false;
    };
  }, [isOnline]);

  return (
    <div
      style={{
        fontFamily: `sans-serif`,
      }}
    >
      {showAlert && (
        <div
          style={{
            color: 'white',
            padding: 20,
            marginBottom: 20,
            background: isOnline ? `rgb(59, 201, 149)` : `#ff5733`,
          }}
        >
          {isOnline
            ? `You are online`
            : `You are offline please check your connection`}
        </div>
      )}
      <p>Change the network status to see the alert</p>
    </div>
  );
};

const App = () => {
  const isOnline = useNavigatorStatus();
  return <Alert isOnline={isOnline} />;
};

3. With render props

NavigatorStatus component gives you render prop with isOnline which you can use further to render alert as per your needs.

import * as React from 'react';
import { NavigatorStatus } from 'react-navigator-status';

// doesn't show alert initially
// show offline alert forever
// show online alert for 4s

const Alert: React.FC<{ isOnline: boolean }> = ({ isOnline }) => {
  const [showAlert, setShowAlert] = React.useState(false);

  React.useEffect(() => {
    let isMounted = true;

    if (isOnline && showAlert && isMounted) {
      setShowAlert(true);

      setTimeout(() => {
        if (isMounted) {
          setShowAlert(false);
        }
      }, 4000);
    }

    if (!isOnline && isMounted) {
      setShowAlert(true);
    }

    return () => {
      isMounted = false;
    };
  }, [isOnline]);

  return (
    <div
      style={{
        fontFamily: `sans-serif`,
      }}
    >
      {showAlert && (
        <div
          style={{
            color: 'white',
            padding: 20,
            marginBottom: 20,
            background: isOnline ? `rgb(59, 201, 149)` : `#ff5733`,
          }}
        >
          {isOnline
            ? `You are online`
            : `You are offline please check your connection`}
        </div>
      )}
      <p>Change the network status to see the alert</p>
    </div>
  );
};

const App = () => {
  return (
    <NavigatorStatus>
      {({ isOnline }) => <Alert isOnline={isOnline} />}
    </NavigatorStatus>
  );
};

Enjoy using react-navigator-status and shower some love to github repo 🎉

offline Article's

30 articles in total

Offline file uploading in Flutter

It`s time to ditch the Thunder Client VSCode Extension! 💥

Local First from Scratch - How to make a web app with local data

How having a Data Layer simplified Offline Mode in my frontend app - Part 1

Nesktop: Offline "Desktop" Next.js App

Flutter:Hive With Api

VScode For Android.

-STORYTIME- Il tente de déployer sans Internet, ça tourne mal

Transform your React Native app with offline audio & video downloads!

Angular PWA & Service Workers (install app, push notifications, offline cache and updates)

React Query Mutations Offline React-Native

How can I play surf.jackbuehner.com offline?

PrivateGPT - Running "ChatGPT" offline on local documents

Epson Printer Offline Mac Fix Epson Offline on Mac

Why Is My Printer Offline When I Print?

CometChat Offline Support in React Native

iOS — Designing Data Layer For Offline-first Apps

Eight Best Free Offline Android Games of 2022

How to create a Offline Internationalization App:Source code and real app

How to create a Offline Internationalization App:Support multiple languages

How to create a Offline Internationalization App:Use Sqlite database

How to create a Offline Internationalization App:Data modeling

How to create a Offline Internationalization App:Build the project structure

How to create a Offline Internationalization App:Technology

⚙️Install anything without Admin rights

Regarding cross platform offline data transfer between 2 mobile devices

Challenges with Offline First Framework

How to convert jpg/jpeg (images) to pdf offline?

React Navigator Status

currently reading

Build a PWA using Workbox

Featured ones:

abubakersiddique761