How to create a reusable Modal in React Js

Last updated : September 16, 2022

There are three easy steps to create a 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

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.

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

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>, 

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) =>{
    <div className={styles.modalContent}>
      <span className={styles.close}>×</span>

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 = () => {
const hideModal = () => {
      {show && 
      <Overlay hideOverlay={hideModal}>
        <Modal content="LearnBestCoding Modal"/>
      <button onClick={showModal}>Show Modal</button>
export default App
React Js reusable Modal
Figure 1: React Js reusable Modal
L Raney
By: L Raney
Lance is a software engineer with over 15 years of experience in full-stack software development.

Comments are disabled

No Comments