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:

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;