alert_popup_emoji/readme.md

A lightweight emoji-based popup alert system with optional sounds, status codes, and smooth animations — perfect for enhancing user feedback during web requests.

# alert_popup_emoji

`alert_popup_emoji` is a lightweight, customizable, emoji-based alert popup system for web applications. It provides colorful alerts for success and error messages, with support for sound notifications, emojis, status codes, and smooth fade-out animations — all with zero dependencies.


## 📦 Installation

Install the package via npm:

```bash
npm install alert_popup_emoji



## ✅ Features
- 🎊 Success and ❌ Error messages
- 🔊 Optional sound notifications
- 🧼 Auto-dismiss after 8 seconds
- 🙌 Emoji randomly picked per type
- ❌ Manual dismiss button
- 💅 Simple CSS (included)
 

😍 Emojis Used
Success:✅ 🎉 😄 👍 👌 🙌 🚀 🥳 💯 🌟 🏆 🎊 😎 ✨ 👏 🫶 🕺 💪
Error: ❌ 😢 🚫 💥 👎 😞 😡 ⚠️ 😖 🛑 😤 😓 😭 🤬 😣 🤯 🙁 🔴 🔔
Randomly selected for each alert type.


🔊 Default Sound URLs
You don’t need to configure them manually unless you want to override:
✅ Success: 'https://res.cloudinary.com/dcj8meqoj/video/upload/v1750740218/success-340660_n6hzhk.mp3',
❌ Error: 'https://res.cloudinary.com/dcj8meqoj/video/upload/v1750740213/error-08-206492_ta4qsj.mp3'



Prop               Type       Description                           

message           string    Message to show in the alert          
type              boolean   true for success, false for error 
sound             boolean   Whether to play a sound               
statusCode        number    Optional HTTP status code to display  
successSoundURL   string    Custom sound URL for success          
errorSoundURL     string    Custom sound URL for error            


⏳ Auto Dismiss
Alerts automatically disappear after 8 seconds.
You can also manually dismiss them using the ❌ button.


📌 Notes
No external dependencies
Works in any modern browser
Ideal for all js projects those where we are doing web request 


🚀 Basic Usage


# showEmojiAlert({

#   message: "Login successful!",

#   type: true,     // true = success, false = error

#   sound: true     // optional sound

# });



🌐 With Web Requests (fetch / axios)


# import { showEmojiAlert } from "alert_popup_emoji"

# async function handleLogin() {

#   try {

#     const res = await fetch('/api/login', { method: 'POST' });

#     const data = await res.json();


#     showEmojiAlert({

#       message: data.message || "Login successful!",

#       type: res.ok,

#       sound: true,

#       statusCode: res.status

#     });

#   } catch (error) {

#     showEmojiAlert({

#       message: "Something went wrong!",

#       type: false,

#       sound: true

#     });

#   }

# }

😎 use case in  REACT 


#import { showEmojiAlert } from "alert_popup_emoji"

# import { showEmojiAlert } from 'emoji-alert-js';

# export function helper() {

#   return new Promise((resolve, reject) => {

#     const password = prompt("Enter your password");

#     if (password === "123") {

#       resolve("Login successfully! Have a nice day.");

#     } else {

#       reject("Please check your password!!");

#     }

#   })

#     .then((message) => {

#       showEmojiAlert({ message: message, sound: false, type: true });

#     })

#     .catch((error) => {

#       showEmojiAlert({ message: error, sound: false, type: false });

#     });

# }





# import { helper } from 'xyz'

# function App() {

#   async function handleSubmit() {

#     await helper(); 

#   }


#   return (

#     <div>

#       <button onClick={handleSubmit}>Login</button>

#     </div>

#   );

# }

# export default App;