Одним из наиболее используемых компонентов в React, несомненно, являются модальные окна, поскольку они могут использоваться в различных контекстах, от сообщений до ввода данных пользователем.
Как и многие другие компоненты в React, можно установить зависимость, которая поможет в этом процессе, однако в итоге мы всегда оказываемся ограничены в нескольких аспектах, и один из них — это стилизация.
По этой причине у меня возникла идея создать эту статью, в которой мы будем использовать уже известные нам знания из области css, props и hooks.
Установим библиотеку иконок
npm install react-icons
Теперь мы можем сразу же приступить к работе над нашим Modal.jsx. Но сначала давайте поговорим о CSS.
Один из классов, который мы создадим, называется .darkBG, потому что после открытия модала я добавлю цвет фона, чтобы немного скрыть все остальные компоненты, находящиеся на странице. Это нужно для того, чтобы сфокусировать внимание пользователя только на модале.
Затем наш компонент будет разделен на три области, первая — заголовок, где можно разместить заголовок модала. Вторая часть — содержимое, здесь можно поместить нужное сообщение.
Третья и последняя часть — это действия, которые могут быть выполнены в модале, то есть отмена модала для его закрытия и другие действия (сохранение, обновление, удаление и т.д.).
Теперь, когда у нас есть несколько понятий, вы можете скопировать этот же css (вы можете свободно играть с ним для настройки вашего модала):
Одним из первых элементов, которые мы собираемся добавить, являются стили, и в этой статье мы будем использовать модули css.
// @src/components/Modal.jsx
import React from "react";
import styles from "./Modal.module.css";
const Modal = () => {
return
Hello Modal
;
};
export default Modal;
В нашем модале должна быть кнопка закрытия, и для этого нам понадобится иконка, таким образом мы импортируем иконку, которая будет использоваться:
// @src/components/Modal.jsx
import React from "react";
import styles from "./Modal.module.css";
import { RiCloseLine } from "react-icons/ri";
const Modal = () => {
return
Hello Modal
;
};
export default Modal;
Хочу обратить ваше внимание на то, что нам нужно будет получать props, чтобы мы могли закрыть модальное окно, как только оно будет открыто. Поэтому мы получим один props, который будет представлять собой функцию setIsOpen(). После всего этого мы можем приступить к работе над нашим шаблоном. Сначала мы добавим темный фон, чтобы придать модалу больше акцента при его открытии.
Как только пользователь щелкнет на темном фоне, мы захотим закрыть модальное окно, поэтому добавим событие реакции onClick и передадим в качестве единственного аргумента функции setIsOpen() число boolean (в данном случае оно будет равно false).
// @src/components/Modal.jsx
import React from "react";
import styles from "./Modal.module.css";
import { RiCloseLine } from "react-icons/ri";
const Modal = ({ setIsOpen }) => {
return (
<>
Теперь мы займемся нашим модалом, для чего добавим обертку для центрирования модала на экране (.centered), а также тело модала (.modal) и его заголовок (.modalHeader).
Мы можем добавить кнопку, содержащую пиктограмму закрытия модала, которая будет содержать событие onClick, а также передавать функции setIsOpen() значение false, чтобы мы могли закрыть модал, как только эта кнопка будет нажата.
Добавим содержимое нашего модала (.modalContent).
// @src/components/Modal.jsx
import React from "react";
import styles from "./Modal.module.css";
import { RiCloseLine } from "react-icons/ri";
const Modal = ({ setIsOpen }) => {
return (
<>
setIsOpen(false)} />
Dialog
Are you sure you want to delete the item?
// ...
);
};
export default Modal;
Добавим стили к кнопкам
// @src/components/Modal.jsx
import React from "react";
import styles from "./Modal.module.css";
import { RiCloseLine } from "react-icons/ri";
const Modal = ({ setIsOpen }) => {
return (
<>
setIsOpen(false)} />
Dialog
Are you sure you want to delete the item?
);
};
export default Modal;
Теперь, когда наш модальный компонент готов, просто добавьте его в наш App.jsx, но сначала давайте создадим следующие стили, чтобы иметь более удобную кнопку на нашей странице:
Теперь мы можем приступить к работе над нашим App.jsx. Сначала мы импортируем useState() и создадим состояние isOpen и функцию setIsOpen. Затем мы просто сделаем условный рендеринг, чтобы показывать модальное окно только тогда, когда состояние isOpen равно true. Аналогичным образом мы передадим функцию setIsOpen() в качестве props.
