https://github.com/shaileshkale17/mobile-notification-popup
mobile notification popup
https://github.com/shaileshkale17/mobile-notification-popup
npm npm-package
Last synced: about 1 month ago
JSON representation
mobile notification popup
- Host: GitHub
- URL: https://github.com/shaileshkale17/mobile-notification-popup
- Owner: Shaileshkale17
- Created: 2024-10-11T20:53:20.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-10-17T13:14:10.000Z (8 months ago)
- Last Synced: 2025-03-29T08:45:42.786Z (2 months ago)
- Topics: npm, npm-package
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/mobile-notification-popup
- Size: 22.5 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
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!
```