This blog is originally published at My Blog
Sometimes we fade up with using various modal box provided by Bootstrap or material or suppose we are not using any of these frameworks. then in such case we need to create our own component for Popups and Modal boxes, I created this for one of such requirement.
Before reading it if you want to take a look then try this demonstration
This will be a fully Reusable Component that we can Invoke from any of the component entire our project.
Step 1: Create a file named custom-popup.module.css with following code :
.overlay {
visibility: hidden;
opacity: 0;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
cursor: pointer;
color: #000;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
@media screen and (max-width: 700px) {
.popup {
width: 70%;
}
}
Step 2: Now create Popup Component with name CustomPopup.jsx with following code
import { useEffect, useState } from "react";
import popupStyles from "./custom-popup.module.css";
import PropTypes from "prop-types";
const CustomPopup = (props) => {
const [show, setShow] = useState(false);
const closeHandler = (e) => {
setShow(false);
props.onClose(false);
};
useEffect(() => {
setShow(props.show);
}, [props.show]);
return (
<div
style={{
visibility: show ? "visible" : "hidden",
opacity: show ? "1" : "0"
}}
className={popupStyles.overlay}
>
<div className={popupStyles.popup}>
<h2>{props.title}</h2>
<span className={popupStyles.close} onClick={closeHandler}>
×
</span>
<div className={popupStyles.content}>{props.children}</div>
</div>
</div>
);
};
CustomPopup.propTypes = {
title: PropTypes.string.isRequired,
show: PropTypes.bool.isRequired,
onClose: PropTypes.func.isRequired
};
export default CustomPopup;
This component using PropTypes, if you havent installed PropTypes in your project then do install that first using
npm install prop-types --save
Step 3: Invocation from another component
<CustomPopup
onClose={popupCloseHandler}
show={visibility}
title="Hello Jeetendra"
>
<h1>Hello This is Popup Content Area</h1>
<h2>This is my lorem ipsum text here!</h2>
</CustomPopup>
It will need 3 props :
1: onClose – need a handler to do some activity after close
click in popup itself
2: show – pass the visibility of popup using boolean
3: title – provide the popup title
and Inside the you may pass any valid JSX that you want to render as content of popup
If you need a complete example how can we do utilise this PopUp Component then you may look into following code
import { useState } from "react";
import CustomPopup from "./CustomPopup";
import "./styles.css";
export default function App() {
const [visibility, setVisibility] = useState(false);
const popupCloseHandler = (e) => {
setVisibility(e);
};
return (
<div className="App">
<button onClick={(e) => setVisibility(!visibility)}>Toggle Popup</button>
<CustomPopup
onClose={popupCloseHandler}
show={visibility}
title="Hello Jeetendra"
>
<h1>Hello This is Popup Content Area</h1>
<h2>This is my lorem ipsum text here!</h2>
</CustomPopup>
</div>
);
}
Thats it for this blog. you may reach out to me in case you have any doubts and suggestions please let me know in comments section.
Top comments (3)
Hey, something cool you can do with your posts to help people understand is add a demo. You can use something like codesandbox to host your code and then embed it straight into your post, like this.
A couple of suggestions for you to think about that, I think, will give a better user experience;
All in all a solid start 👍
Thanks Andrew,
I will look into the suggestions