Всем Привет!
В этой статье разберем как создать простой компонент модального окна в React JS с нуля.
Если задать в поиске фразу - модальное окно для React JS, то можно найти огромное количество готовых библиотек. Так сказать - подключай и используй. Но, чтобы понять, как именно это работает, нужно хотя бы один раз написать компонент модального окна самостоятельно. В нашем случае это будет SimpleModal Component, но Вы можете назвать его по своему.
Если формат изложения материала в виде текста Вам не подходит, то можете посмотреть видео или скачайте готовый проект с github.com.
Github: https://github.com/DmitriyShkredov/react-simple-modal
В результате получим модальное окно, которое плавно открывается и закрывается, подстраивается под мобильный размер окна, и имеет вертикальный скрол, если текста слишком много.
Для удобства разделим процесс создания SimpleModal на отдельные шаги.
1. Создаем разметку:
Для начала создаем страницу, пускай это будет Header, Footer и Main компоненты. Также добавим кнопку для управления модальным окном.
Создаем отдельную папку для нового компонента. Здесь будем хранить все что относится к SimpleModal - разметка, стили и дополнительные функции. Таким образом компонент можно легко переиспользовать или перенести в другой проект.
Модальное окно состоит из нескольких вложенных блоков:
<div className="modal">
<div className="modal-wrapper">
<div className="modal-content">
<button className="modal-close-button">
<IconClose />
</button>
</div>
</div>
</div>
2. Стилизуем разметку:
Основной блок располагается фиксированно, на всю ширину и высоту экрана. Задаем полупрозрачный фон и скрол по оси Y.
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.75);
overflow: hidden;
overflow-y: auto;
z-index: 999;
}
Блок modal-wrapper занимает всю ширину и высоту родителя, растягивается в высоту при необходимости, и располагает дочерний элемент в центре.
.modal-wrapper {
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
min-height: 100%;
}
Блок modal-content - это белый блок, в который мы помещаем заголовок и текст.
.modal-content {
position: relative;
margin: 20px;
width: 100%;
max-width: 600px;
border-radius: 20px;
background-color: #ffffff;
padding: 40px 20px 20px 20px;
}
Кнопку для закрытия модального окна, modal-close-button, располагаем в верхнем правом углу и добавляем svg иконку крестик.
.modal-close-button {
position: absolute;
top: 16px;
right: 16px;
width: 30px;
height: 30px;
}
3. Передаем пропсы:
Переходим в Main.jsx. Для управления модальным окном создаем состояние modalIsOpen. При клике по кнопке изменяем состояние на true. Передаем isModalOpen и функцию onClose в SimpleModal. Передаем заголовок и текст.
4. Получаем пропсы и children:
Переходим в SimpleModal.jsx. Получаем пропсы: isOpen, onClose и children. Для плавного появления и скрытия используем Transition из библиотеки react-transition-group.
Для анимации появления добавляем transition и используем такие стили:
.modal {
transition: opacity 0.3s;
}
.modal-content {
transition: transform 0.3s;
}
.modal--entering, .modal--entered {
opacity: 1;
}
.modal--entering .modal-content, .modal--entered .modal-content {
transform: translateY(0);
}
.modal--exiting, .modal--exited {
opacity: 0;
}
.modal--exiting .modal-content, .modal--exited .modal-content {
transform: translateY(-50px);
}
Компонент готов к использованию.
5. Закрываем модальное окно по клику вне modal-content.
Чтобы закрыть окно по клику по серой области, напишем небольшую функцию onWrapperClick.
const onWrapperClick = (event) => {
if (event.target.classList.contains("modal-wrapper")) onClose();
};
Здесь мы получаем событие event, и определяем по какому элементу был совершен клик. Если это modal-wrapper, то закрываем модальное окно. Выполняем функцию onWrapperClick при событии onClick на элементе modal-wrapper.
<div className="modal-wrapper" onClick={onWrapperClick}>
Таким образом модальное окно закрывается при клике по кнопке с крестиком или по серой области.
6. Добавляем несколько модальных окон на одну страницу.
Мы подошли к последнему разделу этой статьи. Переходим в Main.jsx и добавляем три состояния, три кнопки и три модальных окна с разным текстом.
Получаем три кнопки, каждая кнопка открывает свое модальное окно.
Выводы:
В этой статье приведен пример простейшего компонента модального окна в React JS. Но несмотря на свою простоту это полностью рабочий вариант, который можно использовать в реальных проектах.
