react-connectivity-status[*]

This package provides a simple React component for detecting online/offline status and exposing events to the parent component. Also includes a React component for detecting the availability of a specific endpoint. It is useful for situations where API calls can only be made when a specific server is reachable, even if the network connection is available.

Installation

npm install react-connectivity-status

ConnectivityDetector

A simple React component for detecting online/offline status and exposing events to the parent component.

Usage

import React, { useState } from 'react';
import ConnectivityDetector from 'react-connectivity-status';

const MyComponent = () => {
  const [isOnline, setIsOnline] = useState(false);

  const handleOnline = () => {
    setIsOnline(true);
    console.log('App is online!');
  };

  const handleOffline = () => {
    setIsOnline(false);
    console.log('App is offline!');
  };

  return (
    <div>
      <ConnectivityDetector onOnline={handleOnline} onOffline={handleOffline} />
      {/* Rest of your component's content */}
    </div>
  );
};

export default MyComponent;

Explanation:

1. Import ConnectivityDetector: Import the ConnectivityDetector component from the package.
2. State Management: In your parent component, use useState to manage the isOnline state.
3. Event Handlers: Define handleOnline and handleOffline functions to handle the online and offline events. These functions will be called by the ConnectivityDetector component.
4. ConnectivityDetector Usage: Render the ConnectivityDetector component and pass the onOnline and onOffline functions as props.

How it works:

• The ConnectivityDetector component listens for the browser's online and offline events.
• When the browser goes online or offline, the ConnectivityDetector calls the corresponding prop function (onOnline or onOffline).
• You can then use the isOnline state in your parent component to display different content or perform actions based on the network status.

Example

import React, { useState } from 'react';
import ConnectivityDetector from 'react-connectivity-status'

const App = () => {
  const [isOnline, setIsOnline] = useState(false);

  const handleOnline = () => {
    setIsOnline(true);
    console.log('App is online!');
  };

  const handleOffline = () => {
    setIsOnline(false);
    console.log('App is offline!');
  };

  return (
    <div>
      <ConnectivityDetector onOnline={handleOnline} onOffline={handleOffline} />
      <h1>{isOnline ? 'Online' : 'Offline'}</h1>
    </div>
  );
};

export default App;

Endpoint Availability Detector

A React component for detecting the availability of a specific endpoint. It is useful for situations where API calls can only be made when a specific server is reachable, even if the network connection is available.

Usage

import React, { useState, useEffect } from 'react';
import EndpointAvailabilityDetector from 'react-endpoint-availability-detector';

const MyComponent = () => {
  const [endpointStatus, setEndpointStatus] = useState({});

  useEffect(() => {
    const detector = new EndpointAvailabilityDetector({
      endpoint: 'https://api.example.com/status',
      interval: 2000, // Optional: Check every 2 seconds
    });

    const unsubscribe = detector.isAvailable.subscribe((isAvailable) => {
      setEndpointStatus({ isAvailable });
    });

    return () => unsubscribe();
  }, []);

  return (
    <div>
      <h1>Endpoint Status: {endpointStatus.isAvailable ? 'Available' : 'Unavailable'}</h1>
      {/* ... rest of your component */}
    </div>
  );
};

export default MyComponent;

Props:

• endpoint: (Required) The URL of the endpoint to check.
• interval: (Optional) The time interval (in milliseconds) between checks. Defaults to 5000ms (5 seconds).

Example:

The above example demonstrates how to use the EndpointAvailabilityDetector component to check the availability of the endpoint https://api.example.com/status. The component updates the endpointStatus state with the isAvailable property, which is then used to display the endpoint status in the component.

Features:

• Periodically checks the endpoint availability using fetch.
• Updates the isAvailable property based on the response status.
• Provides a subscription mechanism to listen for changes in the isAvailable property.
• Handles network errors and timeouts gracefully.

Benefits:

• Ensures that API calls are only made when the endpoint is available.
• Improves the reliability and robustness of your applications.
• Provides a simple and efficient way to integrate endpoint availability checks into your React applications.