Add a Modal to a React App with react-modal-video and react-responsive-modal

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 react-modal-video and react-responsive-modal libraries.

react-modal-video

The react-modal-video library lets us add a video modal into our React app.

To install it, we run:

npm i react-modal-video

Then we can use it by writing:

import React, { useState } from "react";
import ModalVideo from "react-modal-video";
import "react-modal-video/scss/modal-video.scss";

export default function App() {
  const [isOpen, setOpen] = useState(false);

  return (
    <React.Fragment>
      <ModalVideo
        channel="youtube"
        autoplay
        isOpen={isOpen}
        videoId="sSZNLAIL65M"
        onClose={() => setOpen(false)}
      />

      <button className="btn-primary" onClick={() => setOpen(true)}>
        open
      </button>
    </React.Fragment>
  );
}

We add the ModalVideo component to add the video modal.

The channel prop lets us set the site with the video.

autoplay enables autoplay.

isOpen has the modal open state.

videoId has the ID for the video to embed in the modal.

onClose is run when we close the modal.

Other sites supported include Vimeo and Yorku.

We can set the aspect ratio with the ratio prop.

allowFullScreen lets us enable full-screen display.

animationSpeed sets the speed of the animation when we open or close the modal.

We can also set the class names of various parts of the modal with the modalVideo , modalVideoClose , modalVideoBody , modalVideoInner , and other props.

react-responsive-modal

The react-responsive-modal library is another library that lets us add modals into our React app.

To install it, we run:

npm i react-responsive-modal

to install it with NPM.

We can also install it with Yarn by running:

yarn add react-responsive-modal

Then we can use it by writing:

import React, { useState } from "react";
import "react-responsive-modal/styles.css";
import { Modal } from "react-responsive-modal";

export default function App() {
  const [open, setOpen] = useState(false);
  const onOpenModal = () => setOpen(true);
  const onCloseModal = () => setOpen(false);

  return (
    <div>
      <button onClick={onOpenModal}>Open modal</button>
      <Modal open={open} onClose={onCloseModal} center>
        <h2>Simple centered modal</h2>
      </Modal>
    </div>
  );
}

We import the CSS file with the modal styles.

And we have the open state to open the modal when it’s true and close it otherwise.

Then we add the modal with the Modal component.

We pass in the open state as the value of the open prop to control it.

And we set open to false when onClose is run, which is when we close the modal.

center centers the modal in the screen.

The modal content is the children of the Modal component.

Conclusion

The react-modal-video and react-responsive-modal libraries let us add modals easily into our React app.