Как создать всплывающий модал в React


Что такое модал?

Модал — это окно, которое появляется на странице, блокируя все функции, чтобы сконцентрировать внимание на определенном действии. Это их отличительная особенность, они просят пользователя выполнить действие.
Чтобы вернуться к основному содержанию, пользователь должен взаимодействовать с модалом, выполнив действие или закрыв его.

Давайте создадим модал с помощью React

Код на GitHub: https://github.com/nicvazquez/react-modal
Демо: https://react-modal-nicvazquez.vercel.app/

Шаг 1: Создание приложения

Давайте создадим приложение React с помощью Vite, используя следующую команду:

npm create vite@latest
Войти в полноэкранный режим Выйти из полноэкранного режима

После этого нам будет предложено завершить работу с некоторыми опциями:

√ Project name: ... react-modal
√ Select a framework: » react
√ Select a variant: » react
Войти в полноэкранный режим Выйти из полноэкранного режима

Отлично! Теперь выполните следующие команды:

cd react-modal
npm install
npm run dev
Enter fullscreen mode Выйти из полноэкранного режима

Если все прошло успешно, у вас должно быть создано приложение, установлены зависимости и проект запущен на локальном сервере, которым в моем случае является http://127.0.0.1:5173/.

Шаг 2: Создадим основу нашего приложения

  • Откройте App.jsx и создайте элемент кнопки. Ваш код должен выглядеть следующим образом:
import "./App.css";

function App() {
    return (
        <div className="container">
            <button>Open Modal</button>
        </div>
    );
}

export default App;
Войти в полноэкранный режим Выйти из полноэкранного режима
  • Измените файл App.css. Стили должны выглядеть следующим образом:
.container {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100vh;
}
Вход в полноэкранный режим Выйти из полноэкранного режима
  • Теперь измените файл 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;
    }
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Если мы перейдем на наш локальный сервер, у нас должно получиться следующее:

Шаг 3: Создаем модальный режим

  • В папке src создадим папку components и внутри нее создадим еще одну папку Modal, которая должна содержать файлы Modal.jsx и modal.module.css.

Структура нашего проекта должна выглядеть примерно так:

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
Вход в полноэкранный режим Выход из полноэкранного режима
  • Чтобы придать структуру модалу, мы должны добавить к нему HTML в 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>
    );
};
Вход в полноэкранный режим Выход из полноэкранного режима
  • Чтобы придать модалу стиль, мы должны иметь этот код в 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;
}
Войти в полноэкранный режим Выход из полноэкранного режима
  • Давайте перейдем в App.jsx и импортируем 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;
Вход в полноэкранный режим Выйти из полноэкранного режима

Ваш модал должен выглядеть следующим образом:

Пока все хорошо, но не хватает одной вещи… показывать модал, когда пользователь нажимает на кнопку.
Давайте займемся этим!

Шаг 4: Возможность открытия модала

  • Перейдите в App.jsx и импортируйте useState:
import { useState } from "react";
Войти в полноэкранный режим Выйти из полноэкранного режима
  • Объявим useState со значением по умолчанию false:
const [showModal, setShowModal] = useState(false)
Войти в полноэкранный режим Выход из полноэкранного режима
  • Добавим функцию onClick и условие для отображения модала:
<button onClick={() => setShowModal(true)}>Open Modal</button>
{showModal && <Modal />}
Вход в полноэкранный режим Выйти из полноэкранного режима
  • Наш App.jsx должен выглядеть следующим образом:
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;
Вход в полноэкранный режим Выход из полноэкранного режима

Теперь, если мы нажмем на кнопку, должен появиться модал. У нас все хорошо, но нам все еще нужно закрыть модальное окно

Шаг 5: Возможность закрыть модальное окно

  • Мы должны перейти в файл Modal.jsx и передать prop в качестве параметра для закрытия модала.
export const Modal = ({ closeModal }) => {
Вход в полноэкранный режим Выйти из полноэкранного режима
  • Поместите этот параметр в качестве события onClick на кнопку модала:
<button onClick={closeModal} className={styles.modal__closeBtn}>
    Close Modal
</button>
Войти в полноэкранный режим Выйти из полноэкранного режима
  • Если мы хотим также закрыть модальное окно при нажатии на кнопку вне его, мы можем передать реквизит в родительский div
<div onClick={closeModal} className={styles.modalBack}>
Войти в полноэкранный режим Выйти из полноэкранного режима
  • Наш Modal.jsx должен выглядеть следующим образом:
import React from "react";
import styles from "./modal.module.css";

export const Modal = ({ closeModal }) => {
    return (
        <div onClick={closeModal} 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>
    );
};
Вход в полноэкранный режим Выход из полноэкранного режима
  • Теперь нам нужно отправить функцию в качестве реквизита из App.jsx, чтобы сработало событие onClick
{showModal && <Modal closeModal={() => setShowModal(false)} />}
Войти в полноэкранный режим Выйти из полноэкранного режима
  • В итоге наш App.jsx должен выглядеть следующим образом:
import { useEffect, 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 closeModal={() => setShowModal(false)} />}
        </div>
    );
}

export default App;
Вход в полноэкранный режим Выход из полноэкранного режима

Готово! 🙂

Вот и все! Надеюсь, этот пост был очень полезен для вас. Любые вопросы или предложения оставляйте в комментариях.

Код можно посмотреть на GitHub: https://github.com/nicvazquez/react-modal.
Демо: https://react-modal-nicvazquez.vercel.app/

Оцените статью
devanswers.ru
Добавить комментарий