Internet Status Tracker

A lightweight, easy-to-use package to track internet connection status in real-time. This utility helps you determine if the user's device is online or offline, making it perfect for applications that require reliable connectivity tracking.

Features

📡 Real-Time Updates: Detects changes in internet connectivity instantly.

💡 Simple API: Easily subscribe and unsubscribe to status changes.

🛠️ Cross-Platform: Works seamlessly in any JavaScript environment, including React, Angular, or Vanilla JavaScript.

🔧 Customizable: Use callbacks to handle connectivity changes as needed.

📦 Lightweight: Minimal size, designed for performance.

Installation

Install the package via npm:

 npm install internet-status-tracker

Uses

Basic Usage with React

import React, { useEffect, useState } from 'react';
import { getInternetStatus, offStatusChange } from 'internet-status-tracker';

const InternetStatusComponent = () => {
  const [isOnline, setIsOnline] = useState(getInternetStatus());

  useEffect(() => {
    const handleStatusChange = (status) => setIsOnline(status);

    getInternetStatus(handleStatusChange);

    return () => offStatusChange(handleStatusChange); // Cleanup listener on unmount
  }, []);

  return <div>{isOnline ? 'You are Online' : 'You are Offline'}</div>;
};

export default InternetStatusComponent;

Basic Usage with Angular

import { Component, OnDestroy, OnInit } from '@angular/core';
import { getInternetStatus, offStatusChange } from 'internet-status-tracker';

@Component({
  selector: 'app-internet-status',
  template: `<p>{{ isOnline ? 'You are Online' : 'You are Offline' }}</p>`,
})

export class InternetStatusComponent implements OnInit, OnDestroy {
  isOnline = getInternetStatus();
  statusListener: any;

  ngOnInit() {
    this.statusListener = (status: boolean) => {
      this.isOnline = status;
    };
    getInternetStatus(this.statusListener);
  }

  ngOnDestroy() {
    offStatusChange(this.statusListener);
  }
}

API Reference

getInternetStatus(callback?)

• Description: Retrieves the current internet status and optionally registers a callback to listen for future changes.

• Parameters: A function that receives true if online, false if offline.

• Returns: Current internet status (true for online, false for offline).

offStatusChange(callback)

• Description: Unregisters a previously registered callback.

• Parameters: The callback function to be removed.

How It Works

• Real-Time Tracking: Listens to the browser's native online and offline events.
• Callback Mechanism: Notify registered listeners whenever a change in connectivity occurs.
• Global State: Maintains a single instance to track connectivity for your application.

Author

Developed with ❤️ by Deepanshu Sarswat.

Demo

Check out this demo video showcasing how to use the internet-status-tracker package in a React app.

https://youtu.be/27oI6TM_Jyg