Добавьте модальное окно в приложение React с помощью response-modal и response-confirm-alert

Модальные окна - это то, что нам часто приходится добавлять в наше приложение React.

Чтобы упростить эту задачу, мы можем использовать существующие библиотеки компонентов для их добавления.

В этой статье мы рассмотрим, как добавить модальное окно в наше приложение React с помощью библиотек react-modal и response-confirm-alert.

Установка

Мы можем установить библиотеку, запустив:

npm install --save react-modal

с NPM или:

yarn add react-modal

с пряжей.

использование

Мы можем использовать его, добавив компонент Modal в наш компонент React.

Для этого пишем:

import React from "react";
import Modal from "react-modal";
const customStyles = {
  content: {
    top: "50%",
    left: "50%",
    right: "auto",
    bottom: "auto",
    marginRight: "-50%",
    transform: "translate(-50%, -50%)"
  }
};
Modal.setAppElement("#root");
export default function App() {
  let subtitle;
  const [modalIsOpen, setIsOpen] = React.useState(false);
  function openModal() {
    setIsOpen(true);
  }
  function afterOpenModal() {
    subtitle.style.color = "#f00";
  }
  function closeModal() {
    setIsOpen(false);
  }
  return (
    <div>
      <button onClick={openModal}>Open Modal</button>
      <Modal
        isOpen={modalIsOpen}
        onAfterOpen={afterOpenModal}
        onRequestClose={closeModal}
        style={customStyles}
        contentLabel="Example Modal"
      >
        <h2 ref={(_subtitle) => (subtitle = _subtitle)}>Hello</h2>
        <button onClick={closeModal}>close</button>
        <div>I am a modal</div>
        <form>
          <input />
          <br />
          <button>ok</button>
          <button>cancel</button>
        </form>
      </Modal>
    </div>
  );
}

Мы добавляем объект customStyles, чтобы стилизовать элементы.

И мы добавляем состояние modalIsOpen, чтобы контролировать, когда модальное окно открывается или закрывается.

Параметр isOpen определяет, открывается или закрывается модальное окно.

onAfterOpen принимает функцию, которая запускает код после открытия модального окна.

onRequestClose принимает функцию, которая запускает код после закрытия модального окна.

style принимает объект с некоторыми свойствами для изменения стилей.

contentLabel - это метка для модального окна.

Мы вызываем Modal.setAppElement(“#root”), чтобы модальный компонент был прикреплен к элементу с ID root.

реагировать-подтверждать-оповещать

Библиотека response-confirm-alert - еще одна библиотека, которая позволяет нам легко добавлять модальное окно в наше приложение React.

Для его установки запускаем:

npm install react-confirm-alert --save

Мы можем использовать это, написав:

import React from "react";
import { confirmAlert } from "react-confirm-alert";
import "react-confirm-alert/src/react-confirm-alert.css";
export default function App() {
  const submit = () => {
    confirmAlert({
      title: "Confirm to submit",
      message: "Are you sure to do this.",
      buttons: [
        {
          label: "Yes",
          onClick: () => alert("Click Yes")
        },
        {
          label: "No",
          onClick: () => alert("Click No")
        }
      ]
    });
  };
  return (
    <div>
      <button onClick={submit}>Confirm dialog</button>
    </div>
  );
}

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

Свойство title устанавливает заголовок диалога.

message устанавливает содержание сообщения.

buttons добавить кнопки с заданными метками и обработчики событий для них.

Мы также можем заставить его отображать пользовательский компонент React в качестве содержимого:

import React from "react";
import { confirmAlert } from "react-confirm-alert";
import "react-confirm-alert/src/react-confirm-alert.css";
export default function App() {
  const submit = () => {
    confirmAlert({
      customUI: ({ onClose }) => {
        return (
          <div className="custom-ui">
            <h1>Are you sure?</h1>
            <p>You want to delete this file?</p>
            <button onClick={onClose}>No</button>
            <button
              onClick={() => {
                onClose();
              }}
            >
              Yes
            </button>
          </div>
        );
      }
    });
  };
  return (
    <div>
      <button onClick={submit}>Confirm dialog</button>
    </div>
  );
}

Мы просто возвращаем компонент в customUI методе.

Он получает метод onClose из параметра и вызывает его всякий раз, когда мы хотим закрыть диалоговое окно.

Заключение

Мы можем легко добавлять модальные окна в наше приложение React с помощью библиотек react-modal и react-confirm-alert.

Подробнее на plainenglish.io