Alerts with Auto Dismissal Functionality
Alerts play an important role in improving user experience by providing instant feedback for user actions. In this article, we will learn how to add alert messages in a React application and automatically dismiss them after a specific time. By using React state and timers, we can create dynamic alerts that appear when needed and disappear without manual interaction. This approach helps keep the UI clean and responsive.
Features of Auto Dismiss Alert Functionality
Manages alert state centrally in App.js for consistent behavior across components.
Automatically dismisses alerts after 2 seconds using setTimeout.
Displays dynamic alert messages with different alert types (success, warning, etc.).
Renders alerts conditionally based on React state to keep the UI clean.
Provides instant user feedback for actions like enabling dark or light mode.
App.JS Code:-
import { useState } from "react";
import "./App.css";
// import About from "./components/About";
import Navbar from "./components/Navbar";
import TestForm from "./components/TestForm";
import Alert from "./components/Alert";
function App() {
const [mode, setmode] = useState("light");
const [alert, setAlert] = useState(null);
let showAlert = (message, type) => {
setAlert({
msg: message,
type: type,
});
setTimeout(() => {
setAlert(null);
}, 2000);
};
let togglemode = () => {
if (mode === "light") {
setmode("dark");
document.body.style.backgroundColor = "black";
showAlert("Dark Mode is Enabled!", "success");
document.title = "Royal Text | Dark Mode Enabled";
} else {
setmode("light");
document.body.style.backgroundColor = "white";
showAlert("Light Mode is Enabled!", "success");
document.title = "Royal Text | Light Mode Enabled";
}
};
return (
<>
<Navbar
name="The Royal Text"
about_us="About us Text"
mode={mode}
togglemode={togglemode}
/>
<Alert alert={alert} />
<TestForm
heading="Enter text to analyze"
mode={mode}
showAlert={showAlert}
/>
</>
);
}
export default App;
TestForm.JS Code:-
import React, { useState } from "react";
export default function TestForm(props) {
const [text, newText] = useState("");
const handleUpCase = () => {
newText(text.toUpperCase());
props.showAlert("Text Converted to UpperCase!", "success")
document.title = "Royal Text | Converted UpperCase"
};
const handleLowCase = () => {
newText(text.toLowerCase());
props.showAlert("Text Converted to LowerCase!", "success")
document.title = "Royal Text | Converted LowerCase"
};
const handleClear = () => {
newText("");
props.showAlert("Text Cleared!", "success")
document.title = "Royal Text | Text Cleared"
};
const handleCopy = () => {
if (navigator.clipboard) {
navigator.clipboard.writeText(text);
props.showAlert("Copied to Clipboard!", "success")
} else {
alert("Clipboard not supported");
}
};
const handleExtraSpaces = () => {
newText(text.split(/\s+/).join(" "));
props.showAlert("Extra Spaces Removed!", "success")
};
const handleChange = (event) => {
newText(event.target.value);
};
const wordCount = text.trim() === "" ? 0 : text.trim().split(/\s+/).length;
return (
<>
<div
className="container"
style={{ color: props.mode === "light" ? "black" : "white" }}
>
<h1 className="my-3 py-2">{props.heading}</h1>
<textarea
className="form-control mb-3"
style={{
backgroundColor: props.mode === "light" ? "white" : "#212529",
color: props.mode === "light" ? "black" : "white",
}}
value={text}
onChange={handleChange}
rows="8"
></textarea>
<button className="btn btn-primary mx-1" onClick={handleUpCase}>
Uppercase
</button>
<button className="btn btn-success mx-1" onClick={handleLowCase}>
Lowercase
</button>
<button className="btn btn-warning mx-1" onClick={handleExtraSpaces}>
Remove Spaces
</button>
<button className="btn btn-info mx-1" onClick={handleCopy}>
Copy Text
</button>
<button className="btn btn-danger mx-1" onClick={handleClear}>
Clear
</button>
{/* Counter */}
<div className="my-3">
<p>
<strong>Words:</strong> {wordCount} |
<strong> Characters:</strong> {text.length}
</p>
</div>
{/* Preview */}
<div className="my-3">
<h3>Preview</h3>
<p>{text.length > 0 ? text : "Nothing to preview..."}</p>
</div>
</div>
</>
);
}