How to create modal popup in react js?
March 27, 2023Hi Friends 👋,
Welcome To aGuideHub!
To create a modal popup in React js, you have to use any modal package library or you have to write a custom modal component. It will create a modal popup in react js.
Today, I am going to show you, how to create modal popup in react js.
- Set up the React project.
- Import necessary components.
- Create the modal popup component.
Let’s start with the first step.
Step 1: Set up the React project.
First you have to install the React project. You should use create-react-app command to create a new React project.
npx create-react-app my-app
cd my-app
npm startStep 2: Import necessary components.
You have to import the reactand { useState } component, which you can use in your React component.
import React, { useState } from "react";
import styles from "./App.module.css";
import Modal from "./components/Modal";Step 3: Create the modal popup component.
In this example, Code defines a button element with the class name primaryBtn and an onClick event handler that sets the state of isOpen to true when clicked.
<main>
<button className={styles.primaryBtn} onClick={() => setIsOpen(true)}>
Open Modal
</button>
{isOpen && <Modal setIsOpen={setIsOpen} />}
</main>ReactJS modal popup example.
The below code is an example of, which will contain an onClick event as well as pass the setIsOpen() function as false so that we can close the modal as soon as this button is clicked.
App.js
import React, { useState } from "react";
import styles from "./App.module.css";
import Modal from "./components/Modal";
const App = () => {
const [isOpen, setIsOpen] = useState(false);
return (
<main>
<button className={styles.primaryBtn} onClick={() => setIsOpen(true)}>
Open Modal
</button>
{isOpen && <Modal setIsOpen={setIsOpen} />}
</main>
);
};
export default App;// @src/components/Modal.js
import React from "react";
import styles from "./Modal.module.css";
import { RiCloseLine } from "react-icons/ri";
const Modal = ({ setIsOpen }) => {
return (
<>
<div className={styles.darkBG} onClick={() => setIsOpen(false)} />
<div className={styles.centered}>
<div className={styles.modal}>
<div className={styles.modalHeader}>
<h5 className={styles.heading}>Dialog</h5>
</div>
<button className={styles.closeBtn} onClick={() => setIsOpen(false)}>
<RiCloseLine style={{ marginBottom: "-3px" }} />
</button>
<div className={styles.modalContent}>
Are you sure you want to delete the item?
</div>
<div className={styles.modalActions}>
<div className={styles.actionsContainer}>
<button
className={styles.deleteBtn}
onClick={() => setIsOpen(false)}
>
Delete
</button>
<button
className={styles.cancelBtn}
onClick={() => setIsOpen(false)}
>
Cancel
</button>
</div>
</div>
</div>
</div>
</>
);
};
export default Modal;We’re going to have is called .darkBG that’s because once the modal is open I’ll add a background color to slightly hide all the other components that are on the page.
/* @src/components/Modal.module.css */
.darkBG {
background-color: rgba(0, 0, 0, 0.2);
width: 100vw;
height: 100vh;
z-index: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.modal {
width: 250px;
height: 170px;
background: white;
color: white;
z-index: 10;
border-radius: 16px;
box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.04);
}
.modalHeader {
height: 50px;
background: white;
overflow: hidden;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
}
.heading {
margin: 0;
padding: 10px;
color: #2c3e50;
font-weight: 500;
font-size: 18px;
text-align: center;
}
.modalContent {
padding: 10px;
font-size: 14px;
color: #2c3e50;
text-align: center;
}
.modalActions {
position: absolute;
bottom: 2px;
margin-bottom: 10px;
width: 100%;
}
.actionsContainer {
display: flex;
justify-content: space-around;
align-items: center;
}
.closeBtn {
cursor: pointer;
font-weight: 500;
padding: 4px 8px;
border-radius: 8px;
border: none;
font-size: 18px;
color: #2c3e50;
background: white;
transition: all 0.25s ease;
box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.06);
position: absolute;
right: 0;
top: 0;
align-self: flex-end;
margin-top: -7px;
margin-right: -7px;
}
.closeBtn:hover {
box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.04);
transform: translate(-4px, 4px);
}
.deleteBtn {
margin-top: 10px;
cursor: pointer;
font-weight: 500;
padding: 11px 28px;
border-radius: 12px;
font-size: 0.8rem;
border: none;
color: #fff;
background: #ff3e4e;
transition: all 0.25s ease;
}
.deleteBtn:hover {
box-shadow: 0 10px 20px -10px rgba(255, 62, 78, 0.6);
transform: translateY(-5px);
background: #ff3e4e;
}
.cancelBtn {
margin-top: 10px;
cursor: pointer;
font-weight: 500;
padding: 11px 28px;
border-radius: 12px;
font-size: 0.8rem;
border: none;
color: #2c3e50;
background: #fcfcfc;
transition: all 0.25s ease;
}
.cancelBtn:hover {
box-shadow: none;
transform: none;
background: whitesmoke;
} /* App.module.css */
.primaryBtn {
margin: 20px 10px;
cursor: pointer;
font-weight: 500;
padding: 13px 25px;
border-radius: 15px;
font-size: 0.8rem;
border: none;
color: white;
background: #185adb;
transition: all 0.25s ease;
}
.primaryBtn:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px -10px rgba(24, 90, 219, 0.6);
}Check the output of the above code example.
Here, we are provided code sandbox links for the above program create modal popup in React js. Then you can use whenever you went and do the changes as per your requirements.
All the best 👍
