Posted onJul 9, 2021 • Edited onJul 21, 2021 • Originally published atw3school.info

Create Custom PopUp Component in React

#react #css #popup #hooks

This blog is originally published atMy 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:opacity500ms;}.popup{margin:70pxauto;padding:20px;background:#fff;border-radius:5px;width:30%;position:relative;transition:all5sease-in-out;}.popuph2{margin-top:0;color:#333;font-family:Tahoma,Arial,sans-serif;}.popup.close{position:absolute;top:20px;right:30px;transition:all200ms;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;}@mediascreenand(max-width:700px){.popup{width:70%;}}

Step 2: Now create Popup Component with name CustomPopup.jsx with following code

import{useEffect,useState}from"react";importpopupStylesfrom"./custom-popup.module.css";importPropTypesfrom"prop-types";constCustomPopup=(props)=>{const[show,setShow]=useState(false);constcloseHandler=(e)=>{setShow(false);props.onClose(false);};useEffect(()=>{setShow(props.show);},[props.show]);return(<divstyle={{visibility:show?"visible":"hidden",opacity:show?"1":"0"}}className={popupStyles.overlay}><divclassName={popupStyles.popup}><h2>{props.title}</h2><spanclassName={popupStyles.close}onClick={closeHandler}>&times;</span><divclassName={popupStyles.content}>{props.children}</div></div></div>);};CustomPopup.propTypes={title:PropTypes.string.isRequired,show:PropTypes.bool.isRequired,onClose:PropTypes.func.isRequired};exportdefaultCustomPopup;

This component using PropTypes, if you havent installed PropTypes in your project then do install that first using

npminstallprop-types--save

Step 3: Invocation from another component

<CustomPopuponClose={popupCloseHandler}show={visibility}title="Hello Jeetendra"><h1>HelloThisisPopupContentArea</h1><h2>Thisismyloremipsumtexthere!</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";importCustomPopupfrom"./CustomPopup";import"./styles.css";exportdefaultfunctionApp(){const[visibility,setVisibility]=useState(false);constpopupCloseHandler=(e)=>{setVisibility(e);};return(<divclassName="App"><buttononClick={(e)=>setVisibility(!visibility)}>TogglePopup</button><CustomPopuponClose={popupCloseHandler}show={visibility}title="Hello Jeetendra"><h1>HelloThisisPopupContentArea</h1><h2>Thisismyloremipsumtexthere!</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)

Andrew Bone

A British web developer, that is passionate about web accessibility.

Location
Britain, Europe
Pronouns
He/Him
Work
Senior Web Developer at bloc-digital
Joined
Jun 8, 2017

• Jul 9 '21

Copy link

Hey, something cool you can do with your posts to help people understand is add a demo. You can use something likecodesandbox 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;

Useportals so your popup isn't sitting in the dom even when it's not being used.
Look into some way to trap focus so keyboard users don't end up focusing outside the popup.
Finally it might be worth reading though thearia examples for a dialog so you can copy the expected behaviours.

All in all a solid start 👍