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

$3

``bash
npm install network-status-indicator
`

Or if you prefer using yarn:

`shellscript
yarn add network-status-indicator
`

$3

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

#### React

`shellscript
npm install network-status-indicator-react
`

#### Next.js

`shellscript
npm install network-status-indicator-nextjs
`

#### Vue

`shellscript
npm install network-status-indicator-vue
`

#### Vanilla JavaScript

`shellscript
npm install network-status-indicator-vanilla
`

Usage

$3

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

function App() {
return (

onlineText="You're back online!"
offlineText="You're offline. Check your connection."
onlineDuration={3000}
/>
{/ Your app content /}

);
}
`

$3

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

function App() {
return (

onlineText="You're back online!"
offlineText="You're offline. Check your connection."
onlineDuration={3000}
/>
{/ Your app content /}

);
}
`

$3

`vue



`

$3

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

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

$3

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

`html


`

API

$3

| 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

Customization

You can customize the appearance of the Network Status Indicator by overriding the default CSS classes. The following classes are available:

- .vnsi-container: The container of the indicator
- .vnsi-bar: The main bar of the indicator
- .vnsi-icon: The status icon
- .vnsi-online: Applied when the network is online
- .vnsi-offline: Applied when the network is offline

Browser Support

Network Status Indicator works in all modern browsers that support the Network Information API.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Mannan Ansari (GitHub Profile)

Acknowledgments

- Thanks to all contributors who have helped to improve this package.
- Inspired by the need for a simple, cross-framework network status indicator.
``