Add a Modal to a React App with Styled React Modal and react-overlays

Spread the love

Modals are something that we have to add often into our React app.

To make this task easier, we can use existing component libraries to add them.

In this article, we’ll look at how to add a modal into our React app with the Styled React Modal and react-overlays libraries.

Styled React Modal

The Styled React Modal library lets us add a modal easily into our React app.

To install it, we run:

npm i styled-react-modal

Then we can use it by writing:

import React, { useState } from "react";
import Modal, { ModalProvider } from "styled-react-modal";
import { ThemeProvider } from "styled-components";

const StyledModal = Modal.styled`
  width: 20rem;
  height: 20rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;

function FancyModalButton() {
  const [isOpen, setIsOpen] = useState(false);

  function toggleModal(e) {

  return (
      <button onClick={toggleModal}>Click me</button>
        <span>I am a modal!</span>
        <button onClick={toggleModal}>Close me</button>

export default function App() {
  return (
    <ThemeProvider theme={{}}>
        <FancyModalButton />

We add the FancyModalButton component to add the modal trigger.

Inside the component, we add the StyledModal inside the component.

It’s created from the tag.

We control whether StyledModal is open or close with the isOpen prop.

The onBackgroundClick prop lets us run code when the background is clicked.

And onEscapeKeydown lets us run code when the Esc key is pressed.

We just toggle the isOpen state to open or close the modal since we pass that as the value of the isOpen prop.

Then we use the styled modal by passing it inside the ThemeProvider and ModalProvider .


We can use the react-overlays library to add a modal to our React app.

To install it, we run:

npm install react-overlays

with NPM or:

yarn add react-overlays

with Yarn.

Then we can use it by writing:

import React, { useState } from "react";
import styled from "styled-components";
import Modal from "react-overlays/Modal";

const Backdrop = styled.div`
  position: fixed;
  z-index: 1040;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #000;
  opacity: 0.5;

const AModal = styled(Modal)`
  position: fixed;
  width: 400px;
  z-index: 1040;
  top: 20px;
  left: 30px;
  border: 1px solid #e5e5e5;
  background-color: white;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  padding: 20px;

export default function App() {
  const [show, setShow] = useState(false);

  const renderBackdrop = (props) => <Backdrop {...props} />;

  return (
    <div className="modal-example">
        className="btn btn-primary mb-4"
        onClick={() => setShow(true)}
        Open Modal

        onHide={() => setShow(false)}
          <h4 id="modal-label">Text in a modal</h4>
          <p>Lorem ipsum</p>

We create the Backdrop component, which is a div with some styles applied.

Then we create the AModal component, which is a modal that has a fixed position.

And we also set the background color and box-shadow to add some effects to show with the modal.

In App , we have a button to open the modal by calling setShow with true .

And we have the AModal component that shows the modal if show is true .

We pass in the Backdrop component as the value of renderBackdrop to render the backdrop.

onHide is called when we hide the modal.


We can add modals easily into our React app with the Styled React Modal and react-overlays libraries.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *