An open API service indexing awesome lists of open source software.

https://github.com/shaileshkale17/mobile-notification-popup

mobile notification popup
https://github.com/shaileshkale17/mobile-notification-popup

npm npm-package

Last synced: 29 days ago
JSON representation

mobile notification popup

Awesome Lists containing this project

README

        

# 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:

```bash
npm install mobile-notification-popup
```

# Usage

### Basic Example

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

```javascript
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:

```javascript
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 (


Notification Example


Show Notification

);
};

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:

```css
.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.

```vbnet

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!

```