Как создавать настраиваемые оповещения в React с помощью React-Toastify

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

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

Установка React Toastify

Чтобы установить Toastify в свой проект React, запустите эту команду в каталоге вашего проекта:

npm установить --save реагировать-toastify

Настройка Toastify

Чтобы использовать пакет Toastify, вам необходимо импортировать ToastContainer, тост метод и сопутствующий файл CSS, предоставляемый пакетом.

ToastContainer внутри компонента приложения хранятся все созданные всплывающие уведомления.

Импортировать { ToastContainer, тост } от"реагировать-тостифицировать";
Импортировать'реагировать-toastify/dist/ReactToastify.css';





instagram viewer
функцияПриложение() {
возвращаться(



 </div>
 );
}

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

функцияПриложение() {
константа уведомить = () => тост.успех("Привет!");
возвращаться(


Уведомить</button>

 </div>
 );
}

Нажатие на кнопку, сгенерированную этим кодом, вызовет тост.успех метод, передав ему "Hello There!" нить. Это создаст всплывающее уведомление, которое отобразит сообщение на экране, например:

Обратите внимание, что существуют различные типы методов всплывающих уведомлений, которые вы можете вызывать, например тост.информация(), тост.ошибка(), тост.успех(), тост.предупреждение(). Каждый из этих методов имеет тонкую цветовую стилизацию, отражающую тип сообщения.

Расположение всплывающих уведомлений

По умолчанию всплывающие уведомления появляются в верхней правой части экрана веб-приложения. Вы можете изменить это, установив свойство position на ToastContainer. Доступно шесть значений позиции: вверху справа, вверху по центру, вверху слева, внизу справа, внизу по центру и внизу слева.

Например:

функцияПриложение() {
константа уведомить = () => тост.успех("Привет!");
возвращаться(


Уведомить</button>
"верхний левый"/>
 </div>
 );
}

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

Вы можете изменить положение по умолчанию для отдельных всплывающих уведомлений, используя свойство position тост методы:

функцияПриложение() {
константа уведомить = () => тост.успех("Привет!", {позиция: тост. POSITION.TOP_CENTER});
возвращаться(


Уведомить</button>
"верхний левый"/>
 </div>
 );
}

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

Обработка свойства autoClose метода Toast и ToastContainer

Вы можете изменить время отображения всплывающих уведомлений. Вы можете контролировать, как долго тост-уведомление остается открытым с помощью автоЗакрыть опора Вы можете изменить время задержки для всех всплывающих уведомлений и отдельных всплывающих уведомлений. автоЗакрыть prop принимает только логическое значение false или продолжительность в миллисекундах.

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

Например:

функцияПриложение() {
константа уведомить = () => тост.успех("Привет!");
возвращаться(


Уведомить</button>
5000}/>
 </div>
 );
}

При указанных выше настройках все всплывающие уведомления будут отображаться ровно пять секунд (5000 миллисекунд).

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

Например:

функцияПриложение() {
константа уведомлениеОдин = () => тост.информация("Закроется через 10 секунд", {автоЗакрыть: 10000});
константа уведомить два = () => тост.информация("Закроется через 15 секунд", {автоЗакрыть: 15000});
возвращаться (


Уведомить одного</button>
Уведомить двоих</button>

 </div>
 );
}

Чтобы всплывающее уведомление не закрывалось по умолчанию, вы можете установить автоЗакрыть поддерживать ЛОЖЬ. Вы можете убедиться, что пользователь должен вручную закрывать каждое всплывающее уведомление, установив параметр автоЗакрыть опора ToastContainer к ложному.

Например:

функцияПриложение() {
константа уведомить = () => тост.информация("Привет!");
возвращаться (


Уведомить</button>
ЛОЖЬ} />
 </div>
 );
}

Настройка автоЗакрыть опора индивидуального тост методы ЛОЖЬ также гарантирует, что эти конкретные всплывающие уведомления не будут закрыты по умолчанию.

Рендеринг нестроковых уведомлений с помощью Toastify

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

Например:

функцияСообщение({toastProps, закрытьToast}) {
возвращаться (


Добро пожаловать {toastProps.position}</p>
</button>
 </div>
 )
}
экспортпо умолчанию Сообщение;

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

Импортируйте компонент Message, затем передайте его функции toast(), отображая его как всплывающее уведомление:

Импортировать { ToastContainer, тост } от"реагировать-тостифицировать";
Импортировать'реагировать-toastify/dist/ReactToastify.css';
Импортировать Сообщение от"./компоненты/сообщение";
функцияПриложение() {
константа сообщение = () => тост(<Сообщение />);
возвращаться (


Добро пожаловать</button>

 </div>
 );
}

При нажатии на кнопку на экране отобразится уведомление, содержащее вопрос и две кнопки.

Стилизация всплывающих уведомлений

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

Чтобы оформить тост-уведомление, присвойте ему className и применить настройки в файле CSS.

Например:

функцияПриложение() {
константа уведомить = () => тост.успех("Привет!", {className: "тост-сообщение"});
возвращаться (


Уведомить</button>
"верхний центр" />
 </div>
 );
}

С className прикрепленное к вашему уведомлению, вы можете стилизовать всплывающее уведомление по своему усмотрению в файле CSS:

.toast-сообщение {
фоновый цвет: #000000;
цвет: #FFFFFF;
размер шрифта: 20пикс.;
набивка: 1бэр 0.5рем;
}

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

Тост-уведомления для вашего веб-приложения

Теперь вы можете создавать собственные оповещения в React, используя пакет React-Toastify и его доступные методы. Оформив эти настраиваемые оповещения/уведомления по своему усмотрению, вы можете улучшить взаимодействие с пользователем в своем веб-приложении.

React-Toastify предлагает быстрый и эффективный метод включения пользовательских предупреждений в ваш проект React без суеты.