Network status indicator for web applications
npm install network-status-indicatorbash
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
onlineText="You're back online!"
offlineText="You're offline. Check your connection."
:onlineDuration="3000"
/>
`
$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.
``