Section 1.1: Installing react-modal-video

The react-modal-video library is designed to facilitate the addition of video modals in your React application. To begin, you need to install the library. Execute the following command in your terminal:

npm i react-modal-video

Once installed, you can use it in your project as shown below:

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>

);

}

The ModalVideo component allows you to create a video modal. Here’s a brief overview of the props you can utilize:

• channel: Specifies the video source (e.g., YouTube).
• autoplay: Enables automatic playback.
• isOpen: Controls the modal's open state.
• videoId: Identifies the video to embed.
• onClose: Function triggered when the modal is closed.

Other supported platforms include Vimeo and Yorku. You can also customize the modal's appearance and behavior using various props, such as allowFullScreen, animationSpeed, and others.

The above video provides a detailed tutorial on creating a responsive and minimalistic modal component in React.

Section 1.2: Installing react-responsive-modal

Another excellent library for incorporating modals into your React application is react-responsive-modal. To install this library, use the following command:

npm i react-responsive-modal

Alternatively, if you prefer Yarn, you can run:

yarn add react-responsive-modal

Here’s how to implement it:

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>

);

}

In this example, we import the necessary CSS for modal styles. The open state determines whether the modal is displayed. The modal’s content is defined within the Modal component, and the center prop ensures it is centered on the screen.

The second video demonstrates how to effectively use modals and pop-ups in React with the react-modal library.