Discussion on: No Internet Connection wrapper for React apps

[tmashwani]

if props.children is any form or any page when get establish our internet connection we want the previous sate of props.children how will we tackle this.

[Chandra Kumar V]

import { ReactElement, useEffect, useState } from 'react';

const NoInternetConnection = ({
  children
}: {
  children: ReactElement;
}) => {
  const [isOnline, setOnline] = useState(true);

  useEffect(() => {
    setOnline(navigator.onLine);
  }, []);

  window.addEventListener('online', () => {
    setOnline(true);
  });

  window.addEventListener('offline', () => {
    setOnline(false);
  });

  return (
    <div className="relative">
      {!isOnline && (
        <div className="absolute top-0 left-0 flex h-screen w-full items-center justify-center bg-black/10 backdrop-blur-xs">
          <div className="flex flex-col items-center rounded-lg bg-white p-4 px-8 text-center">
            <img
              src="/no_internet.png"
              alt=""
              width={60}
              height={60}
              className="mb-4"
            />
            <h1 className="text-2xl font-semibold">
              No Interter Connection
            </h1>
            <p> Please check your internet</p>
          </div>
        </div>
      )}
      {children}
    </div>
  );
};

export default NoInternetConnection;

use like modal window