DEV Community

Cover image for Your React App Breaks When the Internet Drops. Here’s a Better Way.
Jerry Satpathy
Jerry Satpathy

Posted on

Your React App Breaks When the Internet Drops. Here’s a Better Way.

#react #webdev #javascript #opensource

Internet connectivity is outside a developer’s control.

User experience is not.

When a connection drops, most applications either freeze silently, fail API calls without feedback, or leave users staring at broken UI states. The result is confusion, repeated actions, and unnecessary frustration.

React Network Notifier exists to solve this problem cleanly. It detects network changes, surfaces clear offline messaging, and manages reconnect transitions without adding dependencies or boilerplate to your application.

Version 2.0.0 is a complete rewrite focused on performance, flexibility, and modern React compatibility.

react-network-notifier

What It Does

react-network-notifier is a zero-dependency React component that:

  • Detects network disconnection

  • Displays configurable offline states

  • Handles reconnect events with smooth transitions

  • Works with React and Next.js

  • Supports Server-Side Rendering (SSR)

What’s New in v2.0.0

1. Rewritten Build System (Microbundle → Tsup)

The package was rebuilt using Tsup.

Results:

  • Smaller bundle

  • Faster build pipeline

  • Final bundle size under 10KB (minified)

2. Multiple Layout Variants

Three visual modes are now supported:

variant="toast"

variant="banner"

variant="fullscreen"

  • toast: small floating notification

  • banner: horizontal alert

  • fullscreen: immersive offline state (default)

This makes the component usable across dashboards, SaaS products, and internal tools.

3. Native Dark Mode Support

Theme configuration:

theme="light"  |  "dark"  |  "system"
Enter fullscreen mode Exit fullscreen mode

When set to "system", the component respects the user’s OS preference automatically.

4. Reconnect State Handling

When connectivity returns:

  • A success message is shown

  • The component transitions out smoothly

Reconnect messages are fully customizable.

5. ASCII or SVG Icons

Two icon modes are supported:

iconType="ascii"  
iconType="svg"
Enter fullscreen mode Exit fullscreen mode

This allows the component to fit both retro developer tools and modern UI systems.

6. CSS Modules Instead of Inline Styles

Version 2 removes heavy inline style objects and uses injected CSS modules instead.

Benefits:

  • Reduced runtime overhead

  • Cleaner rendering

  • Improved performance consistency

Installation 

npm install react-network-notifier  
# or  
yarn add react-network-notifier
Enter fullscreen mode Exit fullscreen mode

Basic Usage

Add it to your root layout:

import  NetworkNotifier  from  "react-network-notifier";  

function  App() {  
  return (  
  <>  
  <NetworkNotifier  />  
 {/* Your application */}  
  </>  
 );  
}  

export  default  App;
Enter fullscreen mode Exit fullscreen mode

No configuration required.

Custom Configuration Example 

import  NetworkNotifier  from  "react-network-notifier";  

const  customMessages  = [  
  "It looks like your router took a coffee break.",  
  "Offline mode activated.",  
];  

const  reconnectMessages  = [  
  "Connection restored.",  
];  

function  App() {  
  return (  
  <NetworkNotifier  
  messages={customMessages}  
  reconnectMessages={reconnectMessages}  
  variant="toast"  
  theme="system"  
  iconType="svg"  
  closable={true}  
  />  
 );  
}
Enter fullscreen mode Exit fullscreen mode

Configuration Props

Prop Type Default Description
messages string[] [] Array of strings displayed when the connection is lost.
reconnectMessages string[] [] Array of strings displayed when the connection is restored.
images string[] [] Array of ASCII art strings shown during offline states.
styles React.CSSProperties {} Inline styles to override or extend default component CSS.
variant `"toast" \ "banner" \ "fullscreen"`
iconType `"ascii" \ "svg"` "ascii"
theme `"light" \ "dark" \ "system"`
closable boolean true If true, allows users to manually dismiss the notification.

Technical Summary

  • Zero dependencies

  • Under 10KB minified

  • TypeScript-first

  • SSR-safe

  • Tree-shakeable

  • No runtime setup required

Links

NPM:

https://www.npmjs.com/package/react-network-notifier

GitHub:

https://github.com/J3rry320/react-network-notifier

Final Thoughts

Offline handling is often treated as an edge case. In reality, it is a core UX scenario.

React Network Notifier v2.0 is designed to integrate into modern React systems with:

  • Minimal footprint

  • No dependencies

  • SSR safety

  • Configurable presentation

If you care about resilient UI architecture, this is a small but meaningful addition to your stack.

Contributions and feedback are welcome.
And as always Happy Coding! 🧑🏻‍💻

Top comments (0)