quick-toast
v1.10.14
Published
A simple JavaScript toast notification library
Readme
Creating a README.md file with the given content
readme_content = """# 🚀 Quick & Simple Register Form with quick-toast
Looking for a lightweight and efficient register form with instant feedback?
This React Register Form uses quick-toast to give users a smooth and interactive experience!
🌟 Why Use This?
✅ Instant Form Validation – Get real-time error messages
✅ Success Notifications – See a success message after registration
✅ Clean & Minimal UI – Simple, effective, and easy to use
✅ Lightning Fast – Powered by React & quick-toast
🔧 Installation
First, install quick-toast if you haven’t already:
npm install quick-toast@latest
🌟 Why Use This?
✅ Instant Form Validation – Get real-time error messages
✅ Success Notifications – See a success message after registration
✅ Clean & Minimal UI – Simple, effective, and easy to use
✅ Lightning Fast – Powered by React & quick-toast
🔧 Installation
First, install quick-toast if you haven’t already:
bash
Copy code
npm install quick-toast
import React, { useState } from "react";
import { showToast } from "quick-toast";
const RegisterForm = () => {
const [user, setUser] = useState({ name: "", email: "" });
const [isRegistered, setIsRegistered] = useState(false);
// Handle Input Change
const handleChange = (e) => {
setUser({ ...user, [e.target.name]: e.target.value });
};
// Form Validation
const validateForm = () => {
if (!user.name.trim()) {
showToast("⚠️ Name is required!", "error");
return false;
}
if (user.name.length < 3) {
showToast("⚠️ Name must be at least 3 characters!", "error");
return false;
}
if (!user.email.trim()) {
showToast("⚠️ Email is required!", "error");
return false;
}
if (!/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(user.email)) {
showToast("⚠️ Enter a valid email address!", "error");
return false;
}
return true;
};
// Handle Form Submission
const handleSubmit = (e) => {
e.preventDefault();
if (!validateForm()) return;
setIsRegistered(true);
showToast("🎉 Registration successful!", "success");
};
return (
<div style={{ maxWidth: "400px", margin: "auto", padding: "20px", textAlign: "center" }}>
<h2>📝 Register</h2>
{isRegistered ? (
<h3>✅ Welcome, {user.name}! You are successfully registered.</h3>
) : (
<form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
<div>
<label>Name:</label>
<input name="name" value={user.name} onChange={handleChange} placeholder="Enter your name" />
</div>
<div>
<label>Email:</label>
<input name="email" value={user.email} onChange={handleChange} placeholder="Enter your email" />
</div>
<button>🔹 Register</button>
</form>
)}
</div>
);
};
export default RegisterForm;
🎯 How It Works?
1️⃣ User enters their name & email
2️⃣ Form validates the input instantly
3️⃣ Error messages appear if input is incorrect
4️⃣ On success, a toast notification pops up 🎉
5️⃣ User sees a welcome message after registration
📌 Try It Now!
Copy, Paste, and Start Using! 🚀
Enjoy hassle-free form validation with quick-toast!