mobile-notification-popup

A simple and customizable notification popup for web applications.

Overview

The mobile-notification-popup package provides an easy way to display temporary notification popups in your web application. With a straightforward API, you can create notifications that appear for a specified duration and automatically fade out.

Features

• Easy to Use: Quickly create notification popups with just a few lines of code.
• Customizable Duration: Set how long the notification stays on the screen.
• Automatic Dismissal: Notifications automatically disappear after the specified duration.
• Lightweight: Minimal dependencies and code footprint.

Installation

You can install the package using npm:

npm install mobile-notification-popup

Usage

Basic Example

To use the NotificationPopup, you can create a simple notification like this:

import { NotificationPopup } from "mobile-notification-popup";

// Show a notification with a message
new NotificationPopup("This is a notification message!", 3000);

React Component Example

You can integrate the notification popup within a React component as shown below:

import React from "react";
import { NotificationPopup } from "mobile-notification-popup";

const NotificationComponent = () => {
  const showNotification = () => {
    new NotificationPopup(
      "We’re having trouble connecting to the server. Please check your internet connection and try again.",
      3000
    );
  };

  return (
    <div>
      <h1>Notification Example</h1>
      <button onClick={showNotification}>Show Notification</button>
    </div>
  );
};

export default NotificationComponent;

Styling

You can customize the appearance of the notification by adding your own CSS styles. For example, in your styles.css file:

.notification {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 10px 20px;
  background-color: #333;
  color: #fff;
  border-radius: 5px;
  transition: opacity 0.5s ease;
}

.notification.hide {
  opacity: 0;
}

License

This package is open-source and available under the MIT License.

You can copy and paste this code into your README.md file or any Markdown viewer to see the formatted text. Let me know if you need any more adjustments!