Say Goodbye to Frustrated Users with React-Network-Notifier! 🚀

Ever faced a situation where your users are staring at a blank screen when their internet connection is lost? Well, say hello to React-Network-Notifier, a fun and easy-to-integrate React component that keeps your users informed (and entertained) about their connection status! 🎉

React-Network-Notifier displays a hilarious message alongside a quirky ASCII art image whenever users lose their internet connection. Compatible with both React and Next.js, this package ensures that your users will stay engaged during those pesky moments of disconnection.

Key Features:

• A breeze to use with React
• Plays well with both React and Next.js
• Customizable messages and images
• A set of default messages and ASCII art
• Supports Server Side Rendering (SSR)
• Configure it to your heart's content with custom styles and properties
• Disappears like magic when the connection is back

Getting Started:

To start having fun with React-Network-Notifier, install the package using npm or yarn:

npm install react-network-notifier
#or 
yarn add react-network-notifier

Next, import the NetworkNotifier component and add it to your application:

import NetworkNotifier from 'react-network-notifier';

function App() {
  return (
    <div>
      <NetworkNotifier />
      {/* Your app content */}
    </div>
  );
}

Customization:

Want to make React-Network-Notifier truly yours? Customize messages, images, and appearance with styles:

import NetworkNotifier from 'react-network-notifier';

const customMessages = [
  "Whoops, the internet went on vacation!",
  "No connection, but we'll be right back!",
  // ...more messages
];

const customStyles = {
  background: 'linear-gradient(135deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%)',
  color: '#fff',
  // ...more styles
};

function App() {
  return (
    <div>
      <NetworkNotifier messages={customMessages} styles={customStyles} />
      {/* Your app content */}
    </div>
  );
}

Conclusion:

React-Network-Notifier is the perfect solution to keep your users informed and entertained during unexpected internet outages. Its simple API and extensive customization options make it a must-have for any modern web application.

Why wait? Try it out, contribute, or reach out with any questions, suggestions, or feedback!

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