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

Введение

SweetAlert — это популярная библиотека для создания красивых, настраиваемых модальных окон. Она позволяет быстро и удобно добавлять всплывающие окна для подтверждения действий, отображения предупреждений и информации, без необходимости писать сложные CSS- или JavaScript-решения. В этой главе рассмотрим, как интегрировать SweetAlert в приложение на React.

Установка и настройка

Для начала необходимо установить саму библиотеку SweetAlert. Это можно сделать с помощью npm или yarn.

npm install sweetalert2

или

yarn add sweetalert2

После установки библиотеку можно начать использовать в проекте. Однако, чтобы максимально эффективно работать с SweetAlert в React, часто используют обёртку для работы с состоянием, например, react-sweetalert2. Эта обёртка позволяет интегрировать SweetAlert в жизненный цикл React-компонентов.

npm install react-sweetalert2

Теперь библиотека готова к использованию.

Основы использования

Для начала работы с SweetAlert в React достаточно импортировать нужные компоненты:

import Swal from 'sweetalert2';

Чтобы создать базовое всплывающее окно, достаточно вызвать метод Swal.fire(), который будет отображать окно с заданными параметрами.

Swal.fire('Привет мир!');

Этот код отобразит простое окно с сообщением “Привет мир!”. Помимо простого текста, SweetAlert позволяет настроить различные типы окон с кнопками, иконками и анимацией.

Использование в функциональных компонентах

В функциональных компонентах SweetAlert можно использовать с хуками состояния. Например, для отображения модального окна при нажатии на кнопку:

import React, { useState } from 'react';
import Swal from 'sweetalert2';

function App() {
  const [showAlert, setShowAlert] = useState(false);

  const handleClick = () => {
    Swal.fire({
      title: 'Вы уверены?',
      text: 'Это действие нельзя отменить!',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonText: 'Да, удалить',
      cancelButtonText: 'Отмена'
    }).then((result) => {
      if (result.isConfirmed) {
        Swal.fire('Удалено!', 'Ваш файл был удалён.', 'success');
      }
    });
  };

  return (
    <div>
      <button onCl ick={handleClick}>Удалить файл</button>
    </div>
  );
}

export default App;

Здесь используется хук состояния useState, чтобы определить, нужно ли показывать модальное окно. В примере мы добавляем окно подтверждения с кнопками и иконкой предупреждения. Если пользователь подтверждает удаление, появляется окно с успехом.

Использование с классами

В классовых компонентах подход будет немного другим, но в целом принцип остаётся тем же. Нужно просто вызывать Swal.fire() в обработчиках событий.

import React, { Component } from 'react';
import Swal from 'sweetalert2';

class App extends Component {
  handleClick = () => {
    Swal.fire({
      title: 'Удалить файл?',
      text: 'Это действие необратимо!',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonText: 'Да, удалить',
      cancelButtonText: 'Отмена'
    }).then((result) => {
      if (result.isConfirmed) {
        Swal.fire('Удалено!', 'Ваш файл был удалён.', 'success');
      }
    });
  };

  render() {
    return (
      <div>
        <button onCl ick={this.handleClick}>Удалить файл</button>
      </div>
    );
  }
}

export default App;

В классовом компоненте используется метод handleClick, который вызывает модальное окно при клике на кнопку.

Интеграция с react-sweetalert2

Для улучшенной интеграции с React можно использовать react-sweetalert2. Этот пакет предоставляет React-компонент, который упрощает использование SweetAlert2 в приложении.

После установки пакета нужно импортировать компонент SweetAlert из библиотеки.

import React from 'react';
import Swal from 'sweetalert2';
import withReactContent from 'sweetalert2-react-content';

const MySwal = withReactContent(Swal);

function App() {
  const showAlert = () => {
    MySwal.fire({
      title: 'Проверьте!',
      text: 'Использование react-sweetalert2 с SweetAlert2 в React!',
      icon: 'info'
    });
  };

  return (
    <div>
      <button onCl ick={showAlert}>Показать окно</button>
    </div>
  );
}

export default App;

В этом примере создаётся обёртка MySwal с использованием функции withReactContent, которая позволяет улучшить совместимость с React. Всё остальное работает по аналогии с обычным использованием SweetAlert2, но с добавлением React-специфичных особенностей.

Настройка кнопок и действий

SweetAlert позволяет детально настраивать кнопки, действия при их нажатии и внешний вид модального окна.

Пример с несколькими кнопками:
Swal.fire({
  title: 'Вы уверены?',
  text: 'Это действие нельзя отменить.',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Да, удалить',
  cancelButtonText: 'Отмена'
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire('Удалено!', 'Ваш файл был удалён.', 'success');
  } else if (result.isDismissed) {
    Swal.fire('Отменено', 'Ваш файл не был удалён.', 'info');
  }
});

Здесь предусмотрены две кнопки — подтверждение и отмена, каждая из которых вызывает свои действия.

Отображение динамических данных

SweetAlert можно использовать для отображения динамических данных, полученных через запросы или другие операции. Например, можно использовать окно, чтобы показать пользователю результаты работы с сервером.

Swal.fire({
  title: 'Загрузка...',
  text: 'Пожалуйста, подождите.',
  didOpen: () => {
    Swal.showLoading();
  }
});

fetchDataFromServer().then((data) => {
  Swal.fire({
    title: 'Данные получены!',
    text: `Количество записей: ${data.count}`,
    icon: 'success'
  });
});

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

Работа с кастомными стилями и анимациями

SweetAlert2 позволяет настроить внешний вид окон, в том числе анимации появления и исчезновения, а также использовать кастомные стили.

Swal.fire({
  title: 'Привет!',
  text: 'Это кастомное окно с анимацией.',
  icon: 'info',
  showClass: {
    popup: 'animate__animated animate__fadeInDown'
  },
  hideClass: {
    popup: 'animate__animated animate__fadeOutUp'
  }
});

Для добавления анимаций используются классы из библиотеки animate.css, но также можно применить свои стили.

Работа с модальными окнами в контексте React

Важный момент при использовании модальных окон в React — это управление состоянием компонентов. SweetAlert хорошо интегрируется с состоянием React, обеспечивая динамичное отображение окон в зависимости от состояния приложения.

const [isOpen, setIsOpen] = useState(false);

useEffect(() => {
  if (isOpen) {
    Swal.fire('Окно открылось!');
  }
}, [isOpen]);

return (
  <button onCl ick={() => setIsOpen(true)}>Открыть окно</button>
);

Здесь useEffect следит за состоянием isOpen и отображает окно при его изменении.

Заключение

Интеграция SweetAlert в React-приложения позволяет создавать красивые и функциональные модальные окна с минимальными усилиями. Использование обёрток типа react-sweetalert2 упрощает взаимодействие с компонентами, обеспечивая лучшее управление состоянием и совместимость с React-экосистемой. Настройка кнопок, анимаций и динамических данных позволяет создавать гибкие и мощные интерфейсы, повышающие качество пользовательского опыта.

Оглавление