Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
August 23, 2022 05:22 pm GMT

How to Create a Pop-Up Modal in React

What is a modal?

A modal is a box that appears on the page, blocking all functions to concentrate focus on a particular action. This is their differentiating feature, they ask the user to perform an action.
To return to the main content, the user must engage with the modal by completing an action or by closing it.

Let's create a modal with React

Code on GitHub: https://github.com/nicvazquez/react-modal
Demo: https://react-modal-nicvazquez.vercel.app/

Step 1: Create App

Let's create the React app with Vite using the following command:

npm create vite@latest

After this, it will ask us to complete with some options:

 Project name: ... react-modal Select a framework:  react Select a variant:  react

Excellent! Now run the following commands:

cd react-modalnpm installnpm run dev

If everything went well, you should have the application created, with the dependencies installed and have the project running on a local server, which in my case is http://127.0.0.1:5173/.
Vite running React app

Step 2: Let's create the base of our application

  • Open App.jsx and create the button element.Your code should look like this:
import "./App.css";function App() {    return (        <div className="container">            <button>Open Modal</button>        </div>    );}export default App;
  • Modify the App.css file. The styles should look like this:
.container {    display: grid;    place-items: center;    width: 100%;    height: 100vh;}
  • Now modify index.css:
:root {    font-family: Inter, Avenir, Helvetica, Arial, sans-serif;    color-scheme: light dark;    color: rgba(255, 255, 255, 0.87);    background-color: #242424;}button {    border-radius: 8px;    border: 1px solid transparent;    padding: 0.6em 1.2em;    font-size: 1em;    font-weight: 500;    font-family: inherit;    background-color: #1a1a1a;    cursor: pointer;    transition: border-color 0.25s;}button:hover {    border-color: #646cff;}button:focus,button:focus-visible {    outline: 4px auto -webkit-focus-ring-color;}@media (prefers-color-scheme: light) {    button {        background-color: #f9f9f9;    }}

If we go to our local server, we should have the following:

Local server image

Step 3: Let's create the modal

  • In the src folder, let's create the components folder and inside it we need to create another folder called Modal, which should contain the Modal.jsx and modal.module.css files.

The structure of our project should look something like this:

REACT-MODAL node_modules public     src       assets   |       react.svg    components \ Modal   |        Modal.jsx   |        modal.module.css|   |   App.css|   |   App.jsx|   |   index.css|   |   main.jsx   |   .gitignore|   index.html|   package-lock.json|   package.json|   vite.config.js
  • To give structure to the modal, we must add the HTML to it in Modal.jsx:
import React from "react";import styles from "./modal.module.css";export const Modal = () => {    return (        <div className={styles.modalBack}>            <div className={styles.modalContainer}>                <div>                    <h2>Modal</h2>                    <p>                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, nisi. Dolorem est                        esse iste perferendis.                    </p>                </div>                <button className={styles.modal__closeBtn}>Close</button>            </div>        </div>    );};
  • To style the modal, we must have this code in modal.module.css:
.modalBack {    position: absolute;    height: 100vh;    width: 100%;    display: grid;    place-items: center;    background-color: rgba(0, 0, 0, 0.322);}.modalContainer {    display: flex;    flex-direction: column;    justify-content: space-between;    align-items: flex-start;    height: 30%;    max-width: 60%;    background-color: rgb(39, 43, 114);    padding: 3rem;    border-radius: 5px;}
  • Let's go to App.jsx and import the Modal
import "./App.css";import { Modal } from "./components/Modal/Modal";function App() {    return (        <div className="container">            <button>Open Modal</button>            <Modal />        </div>    );}export default App;

Your modal should look like this:

Modal in Local Server

So far so good, but one thing is missing... show the modal when the user clicks on the button.
Let's get to it!

Step 4: Being able to open the modal

  • Go to App.jsx and import useState:
import { useState } from "react";
  • Let's declare the useState with the default value false:
const [showModal, setShowModal] = useState(false)
  • Let's add the onClick function and the conditional to display the modal:
<button onClick={() => setShowModal(true)}>Open Modal</button>{showModal && <Modal />}
  • Our App.jsx should look like this:
import { useState } from "react";import "./App.css";import { Modal } from "./components/Modal/Modal";function App() {    const [showModal, setShowModal] = useState(false);    return (        <div className="container">            <button onClick={() => setShowModal(true)}>Open Modal</button>            {showModal && <Modal />}        </div>    );}export default App;

Now if we click the button, the modal should appear. We are doing well, but one thing is missing: Being able to close the modal

Step 5: Being able to close the modal

  • We must go to the Modal.jsx file and pass a prop as a parameter to close the modal.
export const Modal = ({ closeModal }) => {
  • Put that prop as onClick event to the button of the modal:
<button onClick={closeModal} className={styles.modal__closeBtn}>    Close Modal</button>
  • Our Modal.jsx should look like this:
import React from "react";import styles from "./modal.module.css";export const Modal = ({ closeModal }) => {    return (        <div className={styles.modalBack}>            <div className={styles.modalContainer}>                <div>                    <h2>Modal</h2>                    <p>                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, nisi. Dolorem est                        esse iste perferendis.                    </p>                </div>                <button onClick={closeModal} className={styles.modal__closeBtn}>                    Close Modal                </button>            </div>        </div>    );};

Done! :-)

That was it! I hope this post has been very helpful to you. Any questions or suggestions leave it in the comments.

You can see the code on GitHub: https://github.com/nicvazquez/react-modal
Demo: https://react-modal-nicvazquez.vercel.app/


Original Link: https://dev.to/nicvazquez/how-to-create-a-pop-up-modal-in-react-j3f

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To