How to create a reusable Modal in React Js

Last updated : Jul 30, 2023 12:00 AM

There are three easy steps to create a Modal in React Js

Create a page overlay
Create a Modal component
Create a component to show the Modal in the overlay

I use a React portal to host my overlay to make my page overlay reusable and global to my application. Refer to the article Building a modal with Reactjs portal to learn more about React Portals.

1. Create a page overlay

Edit the index.html file in the public folder and add a div to mount the overlay. My div id is overlay. That is separate from the root div that mounts the main application.

<body>
  <div id="overlay"></div><!-- to mount the overlay -->
  <div id="root"></div><!-- to mount the app -->
</body>

The next step is to make a component to render the overlay. I control the overlay with a function passed into the overlay component.

import { ReactNode } from "react"
import ReactDOM from 'react-dom';
import styles from "./Overlay.module.css"

interface OverlayProps {
    children: ReactNode
    hideOverlay: () => void
}
export const Overlay = (props: OverlayProps) => {
 return ReactDOM.createPortal(
    <div className={styles.overlay} onClick={props.hideOverlay}>{props.children}</div>, 
    document.getElementById("overlay")!)
}

My overlay styles are in a CSS module called Overlay.module.css. That is where I set the CSS properties of my overlay.

.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 2;
  cursor: pointer;
}

2. Create a Modal component

Now it's time to create the Modal component.

import styles from "./Modal.module.css"

interface ModalProps {
  content: string
}
export const Modal = (props: ModalProps) =>{
  return(
    <div className={styles.modalContent}>
      <span className={styles.close}>x</span>
      <p>{props.content}</p>
    </div>
  )
}

My modal styles are in Modal.module.css

.modalContent {
  background-color: #ffffff;
  margin: auto;
  padding: 20px;
  border: 1px solid rgb(96, 82, 82);
  width: 80%;
}
.close {
  color: #444141;
  float: right;
  font-size: 30px;
  font-weight: bold;
}

3. Create a component to show the Modal in the overlay

Now I have the overlay and the Modal. It's time to place the Modal in the overlay.

import { useState } from "react"
import { Modal } from "./components/modal"
import { Overlay } from "./components/portal"

export const App = () => {

const [show, setShow] = useState<boolean>(false)
const showModal = () => {
   setShow(true)
}
const hideModal = () => {
   setShow(false)
}
   return(
      <>
         {show && 
            <Overlay hideOverlay={hideModal}>
               <Modal content="LearnBestCoding Modal"/>
            </Overlay>
         }
         <button onClick={showModal}>Show Modal</button>
      </>
  )
}
export default App

How to create a reusable Modal in React Js

1. Create a page overlay

2. Create a Modal component

3. Create a component to show the Modal in the overlay

Related Links

By: Lance