Как создать пользовательский компонент уведомлений в React с помощью SweetAlert
Библиотека SweetAlert упрощает создание настраиваемых компонентов уведомлений в React.
SweetAlert — популярная библиотека, которая дает вам возможность создавать настраиваемые компоненты уведомлений для вашего приложения React. Вы можете использовать уведомления, чтобы предупреждать пользователей о важной информации, ошибках или успешных действиях в вашем приложении. Это обеспечивает отличный пользовательский опыт.
Установка библиотеки SweetAlert
Чтобы использовать библиотеку SweetAlert для создания уведомлений, вам необходимо установить ее с помощью любого менеджера пакетов по вашему выбору.
Вы можете установить его через менеджер пакетов NPM, выполнив следующую команду в своем терминале:
npm install sweetalert --save
Использование SweetAlert для создания уведомлений
Создание пользовательских уведомлений в вашем приложении React с использованием библиотеки SweetAlert аналогично использованию библиотеки Toastify. Функция swal, предоставляемая библиотекой SweetAlert, создает экземпляр компонента уведомления и определяет свойства уведомления.
Вот пример использования функции swal() для создания компонента уведомления:
import React from 'react'
import swal from 'sweetalert'
function App() {
const notify = () => swal('Hello There');
return (
<div>
<button onClick={notify}>Click Me</button>
</div>
)
}
export default App
Нажатие кнопки вызовет функцию swal, которая отобразит уведомление с сообщением «Привет!».
Функция swal принимает три параметра. Первый параметр — это заголовок уведомления, второй параметр — это сообщение, а третий — значок, который будет отображаться в вашем уведомлении.
Вы можете установить для параметра icon одно из предопределенных значений, например, успех, предупреждение, ошибка или < Strong>информация. Значок уведомления будет основан на переданных вами значениях.
Например:
import React from 'react'
import swal from 'sweetalert'
function App() {
const notify = () => swal('Hello There', 'Welcome to my Page', 'success');
return (
<div>
<button onClick={notify}>Click Me</button>
</div>
)
}
export default App
Когда пользователь нажимает кнопку, он вызывает функцию notify. Затем эта функция отобразит уведомление с сообщением «Привет!» и «Добро пожаловать на мою страницу» со значком успеха.
Альтернативой использованию функции swal с тремя параметрами может быть использование функции swal с параметром объекта. Этот параметр объекта содержит свойства, определяющие компонент уведомления.
Например:
import React from 'react'
import swal from 'sweetalert'
function App() {
const notify = () => swal(
{
title: 'Hello There',
text: 'Welcome to my Page',
icon: 'success',
button: 'OK',
}
);
return (
<div>
<button onClick={notify}>Click Me</button>
</div>
)
}
export default App
В приведенном выше блоке кода функция swal принимает объект со следующими свойствами: title, text, icon и кнопка.
Свойство title определяет заголовок уведомления, а свойство text определяет сообщение. С помощью свойства icon вы можете указать тип значка, отображаемого в уведомлении.
Наконец, свойство button определяет текст кнопки, отображаемый в уведомлении. В этом случае на кнопке отображается текст ОК.
Настройка свойства кнопки
Вы можете настроить свойство button компонента уведомлений в соответствии со своими потребностями в дизайне. Свойство button принимает объект со свойствами, используемыми для настройки поведения и внешнего вида кнопки.
Кнопка по умолчанию содержит следующие свойства:
swal(
{
button: {
text: "OK",
value: true,
visible: true,
className: "",
closeModal: true
},
}
);
В приведенном выше блоке кода с кнопкой используются следующие свойства:
- текст: текст, отображаемый на кнопке.
- значение: значение, которое возвращается, когда пользователь нажимает кнопку. В данном случае значением является true.
- visible: логическое значение указывает, должна ли кнопка быть видимой.
- className: строка, представляющая класс CSS, который будет применен к кнопке.
- closeModal: логическое значение, указывающее, должно ли модальное окно закрываться при нажатии кнопки.
Вы также можете визуализировать несколько кнопок, используя массив со свойством buttons. Массив будет принимать строки в качестве своих элементов.
Например:
swal(
{
buttons: ["Cancel", "Ok"],
}
);
В этом примере ваш компонент уведомлений будет содержать две кнопки с текстами Отмена и ОК. Если для свойства buttons установлено значение false, уведомление будет отображаться без кнопки.
Рендеринг HTML-элементов внутри компонента уведомлений
Вы также можете отображать HTML-элементы отдельно от простых строк в качестве уведомления. Это обеспечивает широкий спектр возможностей настройки.
Например:
import React from 'react'
import swal from 'sweetalert'
function App() {
const notify = () => swal(
{
content: {
element: 'input',
attributes: {
placeholder: 'First Name',
type: 'text'
}
},
buttons: 'Sign Up'
}
)
return (
<div className="app">
<button onClick={notify}>Click Me</button>
</div>
)
}
export default App
В этом примере вы используете свойство content для отображения поля ввода с текстом-заполнителем.
Вы указываете содержимое уведомления с помощью свойства content и HTML-элемента для отображения с помощью свойства element. Чтобы указать атрибуты элемента HTML, вы используете свойство attributes.
Приведенный выше блок кода отобразит уведомление ниже, когда вы нажмете элемент кнопки.
Стилизация компонента уведомлений
Вместо того, чтобы придерживаться стиля окна уведомлений по умолчанию, предоставляемого библиотекой SweetAlert, вы можете настроить внешний вид окна уведомлений, применив свои собственные стили CSS.
Вы будете использовать свойство className, чтобы добавить свои стили к уведомлению. Свойство className определяет класс CSS для уведомления.
Например:
swal(
{
title: 'Hello There',
text: 'Welcome to my Page',
button: false,
className: 'alert',
}
)
Уведомление в приведенном выше блоке кода имеет значение className alert. После создания уведомления и определения className вы определите стили CSS:
.alert{
background-color: green;
font-family: cursive;
border-radius: 15px;
}
Приведенные выше стили CSS будут применяться к уведомлению при рендеринге:
Закрытие компонента уведомлений
Библиотека SweetAlert предоставляет несколько вариантов настройки способа закрытия уведомлений. Этими параметрами являются свойства closeOnEsc, closeOnClickOutside и timer.
Свойство closeOnEsc определяет, закрывается ли окно уведомлений, когда пользователь нажимает клавишу Esc на клавиатуре. Свойство closeOnEsc принимает логическое значение.
swal(
{
...,
closeOnEsc: false,
}
)
По умолчанию для свойства closeOnEsc установлено значение true. В приведенном выше блоке кода вы устанавливаете для свойства closeOnEsc значение false. Установив для свойства значение false, пользователь не сможет закрыть окно уведомлений, нажав клавишу Esc.
Вы также можете определить, может ли пользователь закрыть окно уведомления, щелкнув за его пределами, с помощью свойства closeOnClickOutside.
Если для свойства установлено значение true, свойство closeOnClickOutside позволяет закрывать окно уведомления, щелкнув в любом месте за его пределами. Это поведение SweetAlert по умолчанию. Чтобы остановить такое поведение, установите для свойства closeOnClickOutside значение false.
swal(
{
...,
closeOnClickOutside: false,
}
)
С помощью свойства timer вы можете установить ограничение по времени для автоматического закрытия окна уведомлений. Свойство timer принимает целое значение в миллисекундах.
swal(
{
...,
timer: 5000,
}
)
В этом примере для свойства timer установлено значение 5000. Уведомление будет видно только в течение 5 секунд.
Эффективные пользовательские уведомления с использованием SweetAlert
SweetAlert — мощная библиотека, с помощью которой вы можете создавать индивидуальные уведомления в приложении React. Используя функцию библиотеки swal, вы теперь можете создавать уведомления с настраиваемыми свойствами и поведением. Вы также можете использовать другие библиотеки, такие как React-Toastify, для создания пользовательских оповещений в приложении React.