Network-status-indicator NPM

Network Status Indicator

A customizable network status indicator for React, Next.js, Vue, and vanilla JavaScript applications. This package provides an elegant way to inform users about their network connectivity status.

Features

🌐 Support for React, Next.js, Vue, and vanilla JavaScript
🎨 Customizable appearance and messages
🚀 Lightweight and easy to integrate
📱 Responsive design
🔧 Configurable display duration

Installation

Full Package

npm install network-status-indicator

Or if you prefer using yarn:

yarn add network-status-indicator

Framework-Specific Installations

If you only need support for a specific framework, you can install the corresponding package:

React

npm install network-status-indicator-react

Next.js

npm install network-status-indicator-nextjs

Vue

npm install network-status-indicator-vue

Vanilla JavaScript

npm install network-status-indicator-vanilla

Usage

React

import { NetworkStatusIndicator } from 'network-status-indicator-react';

function App() {
  return (
    <div>
      <NetworkStatusIndicator 
        onlineText="You're back online!"
        offlineText="You're offline. Check your connection."
        onlineDuration={3000}
      />
      {/* Your app content */}
    </div>
  );
}

Next.js

import { NetworkStatusIndicator } from 'network-status-indicator-nextjs';

function App() {
  return (
    <div>
      <NetworkStatusIndicator 
        onlineText="You're back online!"
        offlineText="You're offline. Check your connection."
        onlineDuration={3000}
      />
      {/* Your app content */}
    </div>
  );
}

Vue

<template>
  <div>
    <NetworkStatusIndicator 
      onlineText="You're back online!"
      offlineText="You're offline. Check your connection."
      :onlineDuration="3000"
    />
    <!-- Your app content -->
  </div>
</template>

<script>
import { NetworkStatusIndicator } from 'network-status-indicator-vue';

export default {
  components: {
    NetworkStatusIndicator
  }
}
</script>

Vanilla JavaScript

import { init } from 'network-status-indicator-vanilla';

init({
  onlineText: "You're back online!",
  offlineText: "You're offline. Check your connection.",
  onlineDuration: 3000
});

CDN Usage

You can also use the Network Status Indicator directly from a CDN:

<script src="https://unpkg.com/network-status-indicator/dist/vanilla.min.js"></script>
<script>
  NetworkStatusIndicator.init({
    onlineText: "You're back online!",
    offlineText: "You're offline. Check your connection.",
    onlineDuration: 3000
  });
</script>

API

Props

Prop	Type	Default	Description
`onlineText`	string	"You're back online!"	Text to display when the network is back online
`offlineText`	string	"You're offline. Check your connection."	Text to display when the network is offline
`onlineDuration`	number	3000	Duration (in milliseconds) to show the online message