Изградња занимљивих обавештења са Тоастр-ом у Реацт-у

Обавештења су неопходна за сваку веб апликацију јер корисницима пружају важне информације. Уместо да градите систем обавештења од нуле, можете да користите екстерне библиотеке. Тоастр је једна од популарних библиотека за креирање обавештења у ЈаваСцрипт апликацијама.

Инсталирање Тоастр библиотеке

Прво, почните креирањем Реацт апликације са којом ћете радити. Можете креирајте Реацт апликацију користећи Вите.

Након креирања апликације, инсталирајте тоастр пакет у свој пројекат покретањем следеће команде у свом терминалу:

npm install --save toastr

Сада сте инсталирали тоастр пакет и може да га користи за приказ обавештења.

Креирање обавештења помоћу Тоастр

Да бисте креирали обавештења, користићете тоастр функција. Тхе тоастр функција се користи за креирање и приказивање тост порука. Пре него што креирате обавештења, уверите се да сте увезли своје тоастр стилове обавештења у вашој ЦСС датотеци.

@import'toastr';

Ево примера како креирате обавештење користећи тоастр функција:

import React from"react";
import toastr from"toastr";
functionApp() {
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome");
 };
return (



Click Me</button>
 </div>
 );
}
exportdefault App;

У овом примеру дефинишете а обавестити функција. Тхе Кликни ме дугме позива обавестити функцију када кликнете на њу. Тхе обавестити функција користи тоастр.успех функција за приказ обавештења о успеху.

Тхе тоастр.успех функција узима два аргумента. Први аргумент је порука обавештења која је, у овом случају, стринг "Лепо је имати те овде". Други аргумент је наслов обавештења, "Добродошли".

Обавештење слично следећој слици ће се појавити када кликнете на Кликни ме дугме.

Поред већ тоастр.успех функција, тхе тоастр објекат пружа друге функције за креирање обавештења. Остале функције су тоастр.еррор, тоастр.упозорење, и тоастр.инфо. Свака функција креира обавештење са различитом бојом позадине и иконом, тако да можете лако да разликујете различите типове обавештења.

На пример, када користите тоастр.еррор функција, ваше обавештење ће изгледати овако:

Прилагођавање ваших обавештења

Са библиотеком Тоастр, не можете да прилагодите своја обавештења користећи традиционални ЦСС, за разлику од када радите са Реацт-Тоастифи. Међутим, Тоастр и даље нуди друге опције за прилагођавање обавештења. Можете да користите ове опције да бисте прилагодили положај, изглед и функционалност својих обавештења. Потребно је да проследите опције трећем аргументу тоастр методом.

Ево примера:

import React from"react";
import toastr from"toastr";
functionApp() {
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome", {
 closeButton: true,
 progressBar: true,
 timeOut: 3000,
 positionClass: "toast-top-center",
 showMethod: "fadeIn",
 hideMethod: "fadeOut",
 });
 };
return (



Click Me</button>
 </div>
 );
}
exportdefault App;

За прилагођавање обавештења, овај код користи цлосеБуттон, прогрес бар, пауза у утакмици, поситионЦласс, сховМетход, и хидеМетход својства објекта опција. Тхе цлосеБуттон својство одређује да ли ће се ваше обавештење приказати помоћу дугмета за затварање. Прихвата логичку вредност.

Помоћу прогрес бар својство, можете додати траку напретка у обавештење. Подешавање пауза у утакмици својство вам омогућава да контролишете колико дуго ће се обавештење приказивати. Ово својство одређује број милисекунди пре него што ће обавештење аутоматски нестати.

Тхе поситионЦласс својство дефинише позицију обавештења на екрану. Прихвата осам унапред дефинисаних вредности. Вредности укључују:

• тост-горе-десно: Приказује обавештење у горњем десном углу екрана.
• здравица-горе-лево: Обавештење ће се приказати у горњем левом углу екрана.
• тост-топ-центар: Обавештење ће се појавити у горњем центру вашег екрана.
• здравица-доле-десно: Видећете обавештење у доњем десном углу екрана.
• здравица-доле-лево: Обавештење се налази у доњем левом углу екрана.
• тост-дно-центар: Наћи ћете обавештење у доњем центру екрана.
• тост-топ-фулл-видтх: Обавештење се појављује на врху екрана, испуњавајући целу ширину екрана.
• тост-дно-пуне ширине: Обавештење испуњава целу ширину екрана и приказује се на дну.

На крају, сховМетход и хидеМетход својства контролишу анимације за приказивање и сакривање обавештења. Тхе сховМетход својство специфицира анимацију која се користи за приказивање обавештења, док је хидеМетход својство специфицира анимацију која се користи за сакривање обавештења.

Обавештење дефинисано у блоку кода изнад ће се појавити у горњем центру вашег екрана, са траком напретка и дугметом за затварање. Нестаће након три секунде и користиће прелазе за појављивање и нестајање.

Изгледаће отприлике овако.

Имајте на уму да свако обавештење Тоастра можете да прилагодите са једним објектом опција уместо да их прилагођавате једну по једну. Да бисте то урадили, користићете тоастр.опције имовина. Овај објекат својства садржи својства прилагођавања свих ваших Тоастр обавештења.

На пример:

import React from"react";
import toastr from"toastr";
functionApp() {
 toastr.options = {
 closeButton: true,
 progressBar: true,
 positionClass: "toast-top-right",
 timeOut: 5000,
 showMethod: "fadeIn",
 hideMethod: "fadeOut",
 };
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome");
 };
const displayError = () => {
 toastr.error("You ran into an error", "Sorry");
 };
return (



Click Me</button>
Error</button>
 </div>
 );
}
exportdefault App;

Овај пример показује како да конфигуришете сва обавештења да имају траку напретка, дугме за затварање, екран у горњем десном углу угао екрана, аутоматски затворите након 5 секунди и користите прелазе за појављивање и избледење да бисте се појавили и нестати.

Покретањем апликације и кликом на дугмад ће се приказати интерфејс који би изгледао као на слици испод.

Нека ваша обавештења буду интерактивна

Своја обавештења можете учинити занимљивијим додавањем интерактивности, као што је могућност да кликнете на њих. Да бисте то урадили, користите онцлицк имовина. Тхе онцлицк својство је једна од опција прилагођавања које Тоастр библиотека пружа. Одређује функцију која се покреће када кликнете на обавештење, слично као клик догађај (један од ЈаваСцрипт слушалаца догађаја).

Ево примера како да користите онцлицк имовина:

import React from"react";
import toastr from"toastr";
functionApp() {
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome", {
 onclick: () => {
 toastr.clear();
 },
 });
 };
return (



Click Me</button>
 </div>
 );
}
exportdefault App;

У блоку кода изнад, објекат опција тоастр.успех функција садржи ан онцлицк имовина. Тхе онцлицк својина назива тоастр.јасан функција, која брише обавештење са екрана.

Креирајте занимљива обавештења помоћу Тоастр

Овде сте научили како да користите библиотеку Тоастр за прављење занимљивих обавештења за вашу Реацт апликацију. Инсталирали сте Тоастр, подесили га у својој апликацији и креирали и прилагодили своја обавештења. Тоастр је моћна библиотека која вам може помоћи да креирате информативна и визуелно привлачна обавештења. Осим Тоастра, можете испробати и друге библиотеке као што су СвеетАлерт, Реацт-Тоастифи или Цхакра УИ.