DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Create Custom PopUp Component in React
Jeetendra
Jeetendra

Posted on • Updated on • Originally published at w3school.info

Create Custom PopUp Component in React

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%;
  }
}

Enter fullscreen mode Exit fullscreen mode

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}>
          &times;
        </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;

Enter fullscreen mode Exit fullscreen mode

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

npm install prop-types --save
Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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>
  );
}


Enter fullscreen mode Exit fullscreen mode

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 (2)

Collapse
link2twenty profile image
Andrew Bone

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;

  • Use portals 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 the aria examples for a dialog so you can copy the expected behaviours.

All in all a solid start πŸ‘

Collapse
g10dra profile image
Jeetendra Author

Thanks Andrew,
I will look into the suggestions

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.