It's Popping: Pop Ups Made Simple In React

I just made a project which is an interactive musculoskeletal anatomy table. I wanted to add some pop ups to my application. Another person in my cohort used it in his application, so being the type of person that I am, I told myself that I can do it too. When we hear about pop ups it can include warning messages, completion messages, advertisements (some of which can be annoying), and more.

I did some research and watched several YouTube videos and discovered the bare minimum that you need to make a pop up. This is the absolute bare minimum that has worked for me. There are no special packages to import here, although, there is nothing wrong with packages. As a matter of fact, I learned from these packages as well.

One of the first things to do is build a pop up functional component. The boiler plate code is down below. I called this pop up component PopUp.

import React from 'react';


function PopUp({showPopUp, closePopUp, children}){
  if (!showPopUp) {return null}
  return (
    <div className="PopUp" >
        <button onClick={closePopUp}>close</button>
        {children}
    </div>
  );
};

export default PopUp;

Here is the App component which includes a button that shows a pop up image when clicked.

import React, { useState }from 'react';
import PopUp from './PopUp';
import './index.css';

function App() {
    const [showPopUp, setShowPopUp] = useState(false)
    const image={
        name: "Pop!",
        url: "https://www.envimedia.co/wp-content/uploads/2022/06/nayeonredoutfit3-1024x576.png"
      }

    return (
        <div>
          <button onClick={()=>setShowPopUp(true)}>{image.name}</button>
          <PopUp showPopUp={showPopUp} closePopUp={()=>setShowPopUp(false)}>
            <img className='enlarged' src={image.url} alt={image.name} />
          </PopUp>
        </div>            
    )
}

export default App;

Here is the associated CSS that I used.

img.enlarged {
  height: 400px;
}

.PopUp{
  position: fixed;

  left: 20%;
  top: 20%;

  width: 60%;

  border: 2px solid blue;
  border-radius: 1em;
  box-shadow: -2px 5px 5px blue;

  background-color: white;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  color: #011627;
}

There are some essential things needed to get a pop up to POP!.

First, an event listener is needed, usually a click event (onClick). Here it is: <button onClick={()=>setShowPopUp(true)}>{image.name}</button>.

Next, you need a variable using state responsible for displaying or hiding the pop up. In this case, my variable is aptly called showPopUp with a setter of setShowPopUp. This is a boolean variable (true or false) which is initially set to false. When the above event is triggered (clicking the button) then that variable is set to true. With this state variable I can define a callback function called closePopUp which looks like this: closePopUp={()=>setShowPopUp(false)}. It hides the pop up by setting showPopUp to false.

You need a child element as well. This element can be a simple element such as the one I use (<img className='enlarged' src={image.url} alt={image.name} />), or it can be an entire component.

Three props are passed to the <PopUp> component: showPopUp, closePopUp, and the child element (children) that I want to display.

The CSS styling is important but not as complex as it looks. Remember it is CSS styling not CSS "it must be this way". The one essential thing is the fixed positioning, denoted as position: fixed. It is also nice to center it on the screen (see the next 3 lines in the CSS code). Everything else is up to you.

Now, I will talk about the PopUp component itself. It takes three props as described above. It contains a conditional statement which determines whether to display the component or not based on the 'showPopUp' variables value. The line if (!showPopUp) {return null} reads in plain English "do not display the pop up if showPopUp is false". This is critical, this stops the code in this component unless showPopUp is true. If showPopUp is true then that line evaluates to false and the rest of the code can run. The rest of the code consists of a button which resets showPopUp to false if clicked and hides the pop up. The contents of the component passed as props is displayed.

In short when you click the button labeled 'Pop!' something like this pops up.

In summary generating a pop up does not need to be overly complicated. But, on the other hand, since you can pass entire components as props you can have more functional pop ups.

This is what you need:

1. An event listener
2. A state variable responsible for displaying the pop up as well as a callback function that closes the pop up.
3. An HTML element or component to display content in the pop up.
4. A pop up component which takes which uses conditional rendering to display the contents of your pop up. It accepts a state variable, callback function, and child element as props.
5. CSS styling to display the pop up in a fixed position and to center it appropriately. It can be styled however you want.

Thank you. Now that's what's Poppin!