Online/Offline Status in React: Tracking Connectivity

In web applications, detecting online and offline status is important to provide a smooth user experience. For example, when a user is offline, you can inform them about their connectivity status and offer features like offline mode. A great example of this is the Google Chrome Dinosaur game that appears when the user tries to navigate to a webpage while offline. The game is triggered as a fun way to engage users when there is no internet connection.

In a MERN stack or React app, you can implement this feature by detecting online/offline status using navigator.onLine and using event listeners like online and offline to update your app's UI.

Real World Example (Inspired by Google Chrome's Dinosaur Game):

When a user is offline in Google Chrome, the browser displays a small dinosaur on the page and invites the user to play a simple game until they regain their connection.

You can implement something similar in your React app. For example, when the user goes offline, you could display a message or a mini game (like a simple "Guess the Number" game) until the user is back online.

Code Example (Step by Step):

1. Step 1: Create an Online/Offline Detection Component

   This component will track the online/offline status and show a mini-game (e.g., a simple number guessing game) when the user is offline.

    // OnlineOfflineStatus.js
    import React, { useState, useEffect } from 'react';
   
    function OnlineOfflineStatus() {
      // State to track online status
      const [isOnline, setIsOnline] = useState(navigator.onLine);
      const [guessingGameVisible, setGuessingGameVisible] = useState(false);
      const [guess, setGuess] = useState('');
      const [correctNumber, setCorrectNumber] = useState(Math.floor(Math.random() * 10) + 1);
      const [message, setMessage] = useState('');
   
      useEffect(() => {
        // Event listeners for online/offline
        const handleOnline = () => {
          setIsOnline(true);
          setGuessingGameVisible(false);  // Hide game when back online
          setMessage('You are online!');
        };
   
        const handleOffline = () => {
          setIsOnline(false);
          setMessage('You are offline. Try the game!');
          setGuessingGameVisible(true);  // Show game when offline
        };
   
        window.addEventListener('online', handleOnline);
        window.addEventListener('offline', handleOffline);
   
        return () => {
          window.removeEventListener('online', handleOnline);
          window.removeEventListener('offline', handleOffline);
        };
      }, []);
   
      const handleGuessSubmit = () => {
        if (parseInt(guess) === correctNumber) {
          setMessage('Congratulations! You guessed the correct number!');
        } else {
          setMessage('Try again!');
        }
      };
   
      return (
        <div>
          <h1>{isOnline ? 'You are online!' : 'You are offline!'}</h1>
          <p>{message}</p>
   
          {/* Show game when offline */}
          {guessingGameVisible && !isOnline && (
            <div>
              <h2>Guess the Number Game (Offline)</h2>
              <input 
                type="number" 
                value={guess} 
                onChange={(e) => setGuess(e.target.value)} 
                placeholder="Enter a number between 1 and 10" 
              />
              <button onClick={handleGuessSubmit}>Submit Guess</button>
            </div>
          )}
        </div>
      );
    }
   
    export default OnlineOfflineStatus;
   

   • Explanation:

     • The app listens for the online and offline events to detect the user’s connectivity status.

     • When the user is offline, a mini "Guess the Number" game appears where they can try to guess a randomly generated number.

     • Once the user is back online, the game disappears, and a message confirming the return to the online state is displayed.

2. Step 2: Integrate the Component in Your App

   You can now use the OnlineOfflineStatus component in your main App.js.

    // App.js
    import React from 'react';
    import OnlineOfflineStatus from './OnlineOfflineStatus';
   
    function App() {
      return (
        <div>
          <h1>React Online/Offline Status</h1>
          <OnlineOfflineStatus />
        </div>
      );
    }
   
    export default App;
   

3. Step 3: Experience the Feature

   • Try disconnecting your internet connection. The game will be shown to the user.

   • Once the user is back online, the game will disappear, and they will see a "You are online!" message.