MODAL In React
🧠 What is a Modal?
A
modal is a popup window that appears on top of the main
content of your webpage.
✅ Real-Life Example:
Imagine
you are filling out a form on a website, and suddenly a popup box appears
asking you to log in or confirm something — that's a modal.
💡 Why Use a Modal?
- To grab the user’s full
attention.
- To show important content like:
- Login or Register forms
- Confirmation messages
("Are you sure?")
- Alerts or notices
- Image previews
- Forms or details without
leaving the current page
🔍 Key Features of a Modal
|
Feature |
Description |
|
Pops up over the page |
Appears above the content, darkens the background |
|
User cannot ignore it |
You usually have to close or interact with the modal
before continuing |
|
Controlled by state |
In React, we show/hide modals using useState or a similar
mechanism |
🎨 Modal Structure
Here’s
how a modal is structured:
+-----------------------------+
| Modal Popup Box |
|----------------------------|
|
Title |
|
Content (Form, Message) |
|
Close Button (X) |
+-----------------------------+
(Background behind is
dimmed/disabled)
🛠 How Does It Work in React?
React
shows or hides elements based on state. You can:
- Create a component called Modal
- Use useState to show or hide it
- Render it conditionally based
on that state
Example (Simple Version):
const [showModal, setShowModal] =
useState(false);
return (
<div>
<button onClick={() => setShowModal(true)}>Open
Modal</button>
{showModal && (
<div className="modal">
{/* This is your modal */}
<p>This is a popup
modal</p>
<button onClick={() =>
setShowModal(false)}>Close</button>
</div>
)}
</div>
);
🧩 Components Involved
|
Component |
Role |
|
Modal.js |
Reusable modal component with content inside |
|
App.js |
Controls when the modal is shown (state) |
|
CSS |
Styles to make it look like a real popup with background
dimming |
📌 In Simple Words:
A
modal is a popup box used to display information or ask for user input without
redirecting to another page. It is shown or hidden using a state
variable (like useState in React), and it usually has a close button
and some content inside.
🔁 Quick Summary:
- ✅ Modal = Popup box
- ✅ Appears over the page
- ✅ You control it with React
useState
- ✅ Used for login, register,
alerts, etc.
- ✅ Can be reusable across the
app
Example:
build
Modal with Form Fields like Login and Register modals in
React.
✅ Goal
Create
two modals:
- 🔐 Login Modal
with fields: Email & Password
- 📝 Register Modal
with fields: Name, Email & Password
🧠 Step-by-Step Guide to
Create Login & Register Modals in React
✅ Step 1: Basic Setup
If
not done yet, create a React app:
npx create-react-app auth-modals
cd auth-modals
npm start
✅ Step 2: Create Modal.js
// src/Modal.js
import React from 'react';
import './Modal.css';
const Modal = ({ isOpen, onClose,
title, children }) => {
if (!isOpen) return null;
return (
<div className="modal-overlay">
<div className="modal-box">
<button className="close-btn"
onClick={onClose}>X</button>
<h2>{title}</h2>
<div
className="modal-content">{children}</div>
</div>
</div>
);
};
export default Modal;
✅ Step 3: Create Modal.css
/* src/Modal.css */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
}
.modal-box {
background: #fff;
padding: 30px;
border-radius: 10px;
width: 400px;
max-width: 90%;
position: relative;
box-shadow: 0 0 15px rgba(0,0,0,0.3);
}
.close-btn {
position: absolute;
top: 10px;
right: 15px;
background: crimson;
color: white;
border: none;
border-radius: 50%;
width: 25px;
height: 25px;
cursor: pointer;
}
.modal-content input {
display: block;
width: 100%;
margin-bottom: 15px;
padding: 8px;
border-radius: 5px;
border: 1px solid #ccc;
}
.modal-content button {
padding: 10px 15px;
background: teal;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
✅ Step 4: Update App.js
// src/App.js
import React, { useState } from
'react';
import Modal from './Modal';
function App() {
const [isLoginOpen, setLoginOpen] = useState(false);
const [isRegisterOpen, setRegisterOpen] = useState(false);
// Login Form Handler
const handleLogin = (e) => {
e.preventDefault();
alert("Logged in!");
setLoginOpen(false);
};
// Register Form Handler
const handleRegister = (e) => {
e.preventDefault();
alert("Registered!");
setRegisterOpen(false);
};
return (
<div style={{ padding: "50px" }}>
<h1>React Modal - Login & Register</h1>
<button onClick={() => setLoginOpen(true)}>Login</button>
<button onClick={() => setRegisterOpen(true)} style={{ marginLeft:
'10px' }}>Register</button>
{/* Login Modal */}
<Modal isOpen={isLoginOpen} onClose={() => setLoginOpen(false)}
title="Login">
<form onSubmit={handleLogin}>
<input type="email"
placeholder="Email" required />
<input type="password"
placeholder="Password" required />
<button
type="submit">Login</button>
</form>
</Modal>
{/* Register Modal */}
<Modal isOpen={isRegisterOpen} onClose={() =>
setRegisterOpen(false)} title="Register">
<form onSubmit={handleRegister}>
<input type="text"
placeholder="Name" required />
<input type="email"
placeholder="Email" required />
<input type="password"
placeholder="Password" required />
<button
type="submit">Register</button>
</form>
</Modal>
</div>
);
}
export default App;
🎯 Final Output
- Clicking Login opens a
modal with Email + Password
- Clicking Register opens
a modal with Name + Email + Password
- Close (X) to dismiss modal or
Submit to trigger an alert
ScreenShots:
.png)
.png)
.png)
📦 Optional Enhancements
- Add form validation (e.g.,
using Formik or useState)
- Use react-hook-form for better
control
- Replace alert with actual
authentication logic
- Add animations to modal