Как создать собственный компонент уведомления в React с помощью SweetAlert

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

Установка библиотеки SweetAlert

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

Вы можете установить его через Менеджер пакетов NPM выполнив следующую команду в своем терминале:

npm установить sweetalert --save

Использование SweetAlert для создания уведомлений

Создание пользовательских уведомлений в вашем приложении React с использованием библиотеки SweetAlert похоже на с помощью библиотеки Toastify. глотать Функция, предоставляемая библиотекой SweetAlert, создает экземпляр компонента уведомления и определяет свойства уведомления.

Вот пример использования глотать() функция для создания компонента уведомления:

Импортировать Реагировать от«реагировать»
Импортировать глотать от'милая тревога'
функцияПриложение() {
константа уведомить = () => глотать('Привет');
возвращаться (



Нажмите на меня</button>
 </div>
 )
}
экспортпо умолчанию Приложение

Нажатие на кнопку вызовет глотать функция, которая будет отображать уведомление с сообщением «Hello There».

глотать функция принимает три параметра. Первый параметр — это заголовок уведомления, второй параметр — это сообщение, а третий — значок, который будет отображаться в вашем уведомлении.

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

Например:

Импортировать Реагировать от«реагировать»
Импортировать глотать от'милая тревога'
функцияПриложение() {
константа уведомить = () => глотать('Привет', 'Добро пожаловать на мою страницу', 'успех');
возвращаться (



Нажмите на меня</button>
 </div>
 )
}
экспортпо умолчанию Приложение

Когда пользователь нажимает кнопку, он вызывает поставить в известность функция. Затем эта функция отобразит уведомление с сообщением «Привет!» и «Добро пожаловать на мою страницу» со значком успеха.

Альтернатива использованию глотать функция с тремя параметрами будет использовать глотать функция с параметром объекта. Этот параметр объекта содержит свойства, определяющие компонент уведомления.

Например:

Импортировать Реагировать от«реагировать»
Импортировать глотать от'милая тревога'
функцияПриложение() {
константа уведомить = () => глотать(
 {
 заголовок: 'Привет',
 текст: 'Добро пожаловать на мою страницу',
 икона: 'успех',
 кнопка: 'ХОРОШО',
 }
 );
возвращаться (



Нажмите на меня</button>
 </div>
 )
}
экспортпо умолчанию Приложение

В приведенном выше блоке кода глотать функция принимает объект со следующими свойствами: заголовок, текст, икона, и кнопка.

заголовок свойство определяет заголовок уведомления, а свойство текст свойство определяет сообщение. С икона можно указать тип значка, отображаемого в уведомлении.

Наконец, кнопка Свойство указывает текст кнопки, отображаемой в уведомлении. В этом случае на кнопке отображается текст ХОРОШО.

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

Вы можете настроить кнопка свойство вашего компонента уведомлений в соответствии с вашими потребностями в дизайне. кнопка Свойство принимает объект со свойствами, используемыми для настройки поведения и внешнего вида кнопки.

Кнопка по умолчанию содержит следующие свойства:

глотать(
 {
 кнопка: {
 текст: "ХОРОШО",
 ценить: истинный,
 видимый: истинный,
 имя класса: "",
 closeModal: истинный
 },
 }
 );

В приведенном выше блоке кода с кнопкой используются следующие свойства:

• текст: текст, отображаемый на кнопке.
• ценить: значение, которое будет возвращено, когда пользователь нажмет кнопку. В этом случае значение равно истинный.
• видимый: логическое значение указывает, должна ли кнопка быть видимой.
• className: строка, представляющая класс CSS для применения к кнопке.
• closeModal: логическое значение, указывающее, следует ли закрывать модальное окно при нажатии кнопки.

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

Например:

глотать(
 {
 кнопки: ["Отмена", "Хорошо"],
 }
 );

В этом примере ваш компонент уведомлений будет содержать две кнопки с текстами. отмена и Хорошо. Настройка кнопки собственность на ЛОЖЬ отобразит уведомление без кнопки.

Рендеринг HTML-элементов внутри компонента уведомлений

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

Например:

Импортировать Реагировать от«реагировать»
Импортировать глотать от'милая тревога'
функцияПриложение() {
константа уведомить = () => глотать(
 {
 содержание: {
 элемент: 'вход',
 атрибуты: {
 заполнитель: 'Имя',
 тип: 'текст'
 }
 },
 кнопки: 'Зарегистрироваться'
 }
 )
возвращаться (

"приложение">
Нажмите на меня</button>
 </div>
 )
}
экспортпо умолчанию Приложение

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

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

Приведенный выше блок кода будет отображать уведомление ниже, когда вы нажимаете элемент кнопки.

Стилизация компонента уведомлений

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

Вы будете использовать className свойство, чтобы добавить свои стили к уведомлению. className Свойство определяет класс CSS для уведомления.

Например:

глотать(
 {
 заголовок: 'Привет',
 текст: 'Добро пожаловать на мою страницу',
 кнопка: ЛОЖЬ,
 имя класса: 'тревога',
 }
 )

Уведомление в блоке кода выше имеет className ценить тревога. После создания уведомления и определения className, вы определите свои стили CSS:

.тревога{
фоновый цвет: зеленый;
семейство шрифтов: скоропись;
радиус границы: 15пикс.;
}

Приведенные выше стили CSS будут применяться к уведомлению при рендеринге:

Закрытие компонента уведомления

Библиотека SweetAlert предоставляет несколько параметров для настройки способа закрытия ваших уведомлений. Эти варианты являются closeOnEsc, закрытьOnClickOutside, и таймер характеристики.

closeOnEsc Свойство определяет, закрывается ли окно уведомления, когда пользователь нажимает клавишу Esc на своей клавиатуре. closeOnEsc свойство принимает логическое значение.

глотать(
 {
 ...,
 близко по выходу: ЛОЖЬ,
 }
 )

По умолчанию closeOnEsc свойство установлено на истинный. В приведенном выше блоке кода вы устанавливаете closeOnEsc собственность на ЛОЖЬ. Установив свойство в ЛОЖЬ, пользователь не может закрыть окно уведомления, нажав клавишу Esc.

Вы также можете определить, может ли пользователь закрыть окно уведомления, щелкнув за его пределами с помощью закрытьOnClickOutside свойство.

Если свойство установлено в истинный, закрытьOnClickOutside Свойство позволяет закрыть окно уведомления, щелкнув в любом месте за его пределами. Это поведение SweetAlert по умолчанию. Чтобы остановить это поведение, установите закрытьOnClickOutside собственность на ЛОЖЬ.

глотать(
 {
 ...,
 закрытьOnClickOutside: ЛОЖЬ,
 }
 )

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

глотать(
 {
 ...,
 таймер: 5000,
 }
 )

В этом примере таймер свойство установлено на 5000. Уведомление будет видно только в течение 5 секунд.

Эффективные настраиваемые уведомления с использованием SweetAlert

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