Byg engagerende notifikationer med Toastr i React

Meddelelser er afgørende for enhver webapplikation, da de giver brugerne vigtige oplysninger. I stedet for at bygge meddelelsessystemet fra bunden, kan du gøre brug af eksterne biblioteker. Toastr er et af de populære biblioteker til oprettelse af meddelelser i JavaScript-applikationer.

Installation af Toastr-biblioteket

Start først med at oprette en React-applikation, du vil arbejde med. Du kan opret en React-applikation ved hjælp af Vite.

Efter oprettelse af applikationen skal du installere toastr pakke i dit projekt ved at køre følgende kommando i din terminal:

npm install --save toastr

Nu har du installeret toastr pakke og kan bruge den til at vise meddelelser.

Oprettelse af meddelelser ved hjælp af Toastr

For at oprette meddelelserne skal du bruge toastr fungere. Det toastr funktionen bruges til at oprette og vise toast-meddelelser. Før du opretter dine meddelelser, skal du sørge for at importere dine toastr meddelelsesstile i din CSS-fil.

@import'toastr';

Her er et eksempel på, hvordan du opretter en notifikation ved hjælp af toastr fungere:

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;

I dette eksempel definerer du en underrette fungere. Det Klik på Mig knappen kalder underrette funktion, når du klikker på den. Det underrette funktionen bruger toastr.succes funktion for at vise en succesmeddelelse.

Det toastr.succes funktion tager to argumenter. Det første argument er meddelelsesmeddelelsen, som i dette tilfælde er strengen "Det er rart at have dig her". Det andet argument er underretningens titel, "Velkommen".

En meddelelse, der ligner det følgende billede, vises, når du klikker på Klik på Mig knap.

Ud over toastr.succes funktion, den toastr objekt giver andre funktioner til oprettelse af meddelelser. De andre funktioner er toastr.fejl, toastr.advarsel, og toastr.info. Hver funktion opretter en notifikation med en anden baggrundsfarve og ikon, så du nemt kan skelne mellem forskellige typer af notifikationer.

For eksempel, når du bruger toastr.fejl funktion, vil din notifikation se sådan ud:

Tilpasning af dine notifikationer

Med Toastr-biblioteket kan du ikke tilpasse dine meddelelser ved hjælp af traditionel CSS, i modsætning til når du arbejder med React-Toastify. Toastr giver dog stadig andre muligheder for at tilpasse meddelelser. Du kan bruge disse muligheder til at tilpasse dine notifikationers placering, udseende og funktionalitet. Du skal videregive mulighederne til det tredje argument i toastr metode.

Her er et eksempel:

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;

For at tilpasse meddelelsen bruger denne kode Luk-knap, progressBar, tiden er gået, positionKlasse, showMethod, og skjulemetode egenskaber for option-objektet. Det Luk-knap egenskab bestemmer, om din meddelelse vises med en lukknap. Den accepterer en boolesk værdi.

Bruger progressBar ejendom, kan du tilføje en statuslinje til meddelelsen. Indstilling af tiden er gået egenskab giver dig mulighed for at kontrollere, hvor længe en meddelelse skal vises. Denne egenskab angiver antallet af millisekunder, før meddelelsen automatisk forsvinder.

Det positionKlasse egenskab definerer meddelelsens position på din skærm. Den accepterer otte foruddefinerede værdier. Værdierne omfatter:

• toast-øverst-højre: Viser meddelelsen i øverste højre hjørne af din skærm.
• toast-øverst-venstre: Meddelelsen vises i øverste venstre hjørne af din skærm.
• toast-top-center: Meddelelsen vises øverst i midten af ​​din skærm.
• toast-nederst-højre: Du vil se meddelelsen i nederste højre hjørne af din skærm.
• toast-nederst-venstre: Meddelelsen er placeret i nederste venstre hjørne af din skærm.
• toast-bund-center: Du finder meddelelsen nederst i midten af ​​skærmen.
• toast-top-fuld bredde: Meddelelsen vises øverst på din skærm og fylder hele skærmens bredde.
• toast-bund-fuld bredde: Meddelelsen fylder hele din skærms bredde og vises i bunden.

Til sidst showMethod og skjulemetode egenskaber styrer animationerne til at vise og skjule meddelelsen. Det showMethod egenskaben angiver den animation, der bruges til at vise en meddelelse, mens skjulemetode egenskaben angiver den animation, der bruges til at skjule en meddelelse.

Meddelelsen, der er defineret i kodeblokken ovenfor, vises øverst i midten af ​​din skærm med en statuslinje og en lukkeknap. Den forsvinder efter tre sekunder og bruger fade-in og fade-out overgange til at vises og forsvinde.

Det kommer til at se sådan ud.

Bemærk, at du kan tilpasse hver Toastr-meddelelse med et enkelt indstillingsobjekt i stedet for at tilpasse dem én ad gangen. For at gøre dette skal du bruge toastr.indstillinger ejendom. Dette ejendomsobjekt indeholder tilpasningsegenskaberne for alle dine Toastr-meddelelser.

For eksempel:

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;

Dette eksempel viser, hvordan du konfigurerer alle meddelelser til at have en statuslinje, en lukkeknap, et display øverst til højre hjørne af skærmen, luk automatisk efter 5 sekunder, og brug fade-in og fade-out overgange til at blive vist og forsvinde.

Hvis du kører programmet og klikker på knapperne, får du en grænseflade, der ser ud som på billedet nedenfor.

Gør dine meddelelser interaktive

Du kan gøre dine notifikationer mere engagerende ved at tilføje interaktivitet, såsom muligheden for at klikke på dem. For at gøre dette bruger du onclick ejendom. Det onclick egenskaben er en af ​​de tilpasningsmuligheder, som Toastr-biblioteket tilbyder. Den specificerer en funktion, der kører, når du klikker på meddelelsen, svarende til klik begivenhed (en af ​​JavaScripts begivenhedslyttere).

Her er et eksempel på, hvordan du bruger onclick ejendom:

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;

I kodeblokken ovenfor er indstillingsobjektet for toastr.succes funktion indeholder en onclick ejendom. Det onclick ejendom kalder toastr.clear funktion, som rydder meddelelsen fra skærmen.

Opret engagerende meddelelser ved hjælp af Toastr

Her lærte du, hvordan du bruger Toastr-biblioteket til at bygge engagerende notifikationer til din React-applikation. Du installerede Toastr, satte den op i din app og oprettede og tilpassede dine notifikationer. Toastr er et kraftfuldt bibliotek, der kan hjælpe dig med at skabe informative og visuelt tiltalende meddelelser. Udover Toastr kan du også prøve andre biblioteker som SweetAlert, React-Toastify eller Chakra UI.