Методы тостера уведомлений React Suite
React Suite — это популярная интерфейсная библиотека с набором компонентов React, разработанных для промежуточной платформы и серверных продуктов. Компонент уведомления позволяет пользователю отображать сообщение уведомления глобально. Уведомление также используется с тостером в приложениях, основанных на реакции.
Методы тостера уведомлений React Suite:
- toaster.push(): этот метод используется для отправки сообщения.
- toaster.remove(): этот метод используется для удаления сообщения по ключу.
- toaster.clear(): этот метод используется для очистки всех сообщений.
Синтаксис:
import { Notification, Button } from "rsuite";
import { useToaster } from "rsuite/toaster";
<Button onClick={() => toaster.push(
<Notification >
</Notification>, { placement: "topStart" })}>
...
</Button>Подход: давайте создадим проект React и установим модуль React Suite. Затем мы создадим пользовательский интерфейс, который продемонстрирует методы тостера уведомлений React Suite .
Создание проекта React:
Шаг 1: Чтобы создать приложение для реагирования, вам необходимо установить модули реагирования с помощью команды npx. «npx» используется вместо «npm», потому что вам понадобится эта команда в жизненном цикле вашего приложения только один раз.
npx create-react-app project_name
Шаг 2: После создания проекта реакции перейдите в папку для выполнения различных операций.
cd project_name
Шаг 3: После создания приложения ReactJS установите необходимый модуль с помощью следующей команды:
npm install rsuite
Структура проекта: после выполнения команд, упомянутых в предыдущих шагах, если вы откроете проект в редакторе, вы увидите аналогичную структуру проекта, как показано ниже. Пользователь делает новый компонент или изменяет код, который мы будем выполнять в исходной папке.
Шаг для запуска приложения: Запустите приложение, используя следующую команду из корневого каталога проекта:
npm start
Пример 1: мы создаем пользовательский интерфейс, который показывает различные методы уведомлений React Suite toaster.push() и toaster.clear() .
App.js
import React from "react"import "../node_modules/rsuite/dist/rsuite.min.css";import { Notification, Button } from "rsuite";import { useToaster } from "rsuite/toaster"; export default function App() { const toaster = useToaster(); return ( <div style={{ margin: 100 }}> <h3 style={{ color: "green" }}> GeeksforGeeks </h3> <h3>React Suite Notification toaster Methods</h3> <br /><br /> <Button onClick={() => toaster.push( <Notification type={"success"} header={"Success"} closable> <h4> Hi ! Welcome to GeeksforGeeks</h4> </Notification>, { placement: "topStart" })}> Click Here ! </Button><br /><br /> <Button onClick={() => toaster.clear()}> Click to Clear ! </Button> </div> );} |
Вывод: теперь откройте браузер и перейдите по адресу http://localhost:3000/, вы увидите следующий вывод:
Пример 2. Мы создаем пользовательский интерфейс, в котором отображаются методы уведомлений React Suite toaster.push() и toaster.remove() .
App.js
import React from "react"import "../node_modules/rsuite/dist/rsuite.min.css";import { Notification, Button } from "rsuite";import { useToaster } from "rsuite/toaster"; export default function App() { const toaster = useToaster(); return ( <div style={{ margin: 100 }}> <h3 style={{ color: "green" }}> GeeksforGeeks </h3> <h3>React Suite Notification toaster Methods</h3> <br /><br /> <Button onClick={() => toaster.push( <Notification type={"info"} header={"Info"} duration={4000}> <h4> Your message . </h4> </Notification>, { placement: "topStart" })}> Click Here ! </Button><br /><br /> <Button onClick={() => toaster.remove()}> Click to Remove ! </Button> </div> );} |
Вывод: теперь откройте браузер и перейдите по адресу http://localhost:3000/, вы увидите следующий вывод:
Ссылка: https://rsuitejs.com/components/notification/#use-toaster