как сделать модальное окно react

Аватар пользователя Aleksey
Aleksey
13 апреля 2023

Для создания модального окна в React.js можно использовать различные библиотеки, например, react-modal или react-bootstrap. Рассмотрим пример использования react-modal.

  • Устанавливаем библиотеку react-modal с помощью npm:
npm install react-modal
  • Импортируем библиотеку react-modal в наш компонент:
import React, { useState } from 'react';
import Modal from 'react-modal';
  • Создаем состояние для открытия и закрытия модального окна, а также функцию для изменения этого состояния:
const [modalIsOpen, setModalIsOpen] = useState(false);

const openModal = () => {
  setModalIsOpen(true);
};

const closeModal = () => {
  setModalIsOpen(false);
};
  • Определяем содержимое модального окна:
const modalContent = (
  <div>
    <h2>Заголовок модального окна</h2>
    <p>Текст модального окна</p>
    <button onClick={closeModal}>Закрыть</button>
  </div>
);
  • Рендерим кнопку для открытия модального окна и компонент Modal:
return (
  <div>
    <button onClick={openModal}>Открыть модальное окно</button>
    <Modal isOpen={modalIsOpen} onRequestClose={closeModal}>
      {modalContent}
    </Modal>
  </div>
);

Готово! Теперь при клике на кнопку будет открываться модальное окно с заданным содержимым.

3 0