Bygg engagerande aviseringar med Toastr i React

Aviseringar är viktiga för alla webbapplikationer eftersom de ger användarna viktig information. Istället för att bygga upp meddelandesystemet från grunden kan du använda externa bibliotek. Toastr är ett av de populära biblioteken för att skapa aviseringar i JavaScript-applikationer.

Installera Toastr-biblioteket

Börja först med att skapa en React-applikation du kommer att arbeta med. Du kan skapa en React-applikation med Vite.

När du har skapat applikationen installerar du toastr paket i ditt projekt genom att köra följande kommando i din terminal:

npm install --save toastr

Nu har du installerat toastr paketet och kan använda det för att visa aviseringar.

Skapa aviseringar med Toastr

För att skapa aviseringarna använder du toastr fungera. De toastr funktionen används för att skapa och visa toast-meddelanden. Innan du skapar dina aviseringar, se till att du importerar dina toastr meddelandestilar i din CSS-fil.

@import'toastr';

Här är ett exempel på hur du skapar en avisering med hjälp av toastr fungera:

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 det här exemplet definierar du en meddela fungera. De Klicka här knappen anropar meddela funktion när du klickar på den. De meddela funktionen använder toastr.framgång funktion för att visa ett framgångsmeddelande.

De toastr.framgång funktion tar två argument. Det första argumentet är aviseringsmeddelandet som i det här fallet är strängen "Det är trevligt att ha dig här". Det andra argumentet är meddelandetiteln, "Välkommen".

Ett meddelande som liknar följande bild visas när du klickar på Klicka här knapp.

Utöver toastr.framgång funktion, den toastr objekt tillhandahåller andra funktioner för att skapa meddelanden. De andra funktionerna är toastr.error, toastr.varning, och toastr.info. Varje funktion skapar en avisering med olika bakgrundsfärg och ikon, så att du enkelt kan skilja mellan olika typer av meddelanden.

Till exempel när du använder toastr.error funktion, kommer din avisering se ut så här:

Anpassa dina aviseringar

Med Toastr-biblioteket kan du inte anpassa dina meddelanden med traditionell CSS, till skillnad från när du arbetar med React-Toastify. Toastr erbjuder dock fortfarande andra alternativ för att anpassa aviseringar. Du kan använda dessa alternativ för att anpassa dina aviseringars position, utseende och funktionalitet. Du måste skicka alternativen till det tredje argumentet i toastr metod.

Här är ett exempel:

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;

För att anpassa aviseringen använder den här koden stängknapp, progressBar, Paus, positionKlass, showMethod, och hideMethod egenskaper för optionsobjektet. De stängknapp egenskapen avgör om ditt meddelande visas med en stängningsknapp. Den accepterar ett booleskt värde.

Använda progressBar egendom kan du lägga till en förloppsindikator i meddelandet. Ställa in Paus egenskapen låter dig styra hur länge ett meddelande ska visas. Den här egenskapen anger antalet millisekunder innan meddelandet automatiskt försvinner.

De positionKlass egenskapen definierar meddelandets position på din skärm. Den accepterar åtta fördefinierade värden. Värdena inkluderar:

• toast-överst till höger: Visar meddelandet i det övre högra hörnet på skärmen.
• toast-överst-vänster: Aviseringen visas i det övre vänstra hörnet på skärmen.
• toast-top-center: Meddelandet visas högst upp i mitten av skärmen.
• toast-nedre-höger: Du kommer att se meddelandet i det nedre högra hörnet av skärmen.
• toast-nedre-vänster: Aviseringen placeras i det nedre vänstra hörnet på skärmen.
• toast-botten-center: Du hittar meddelandet längst ned i mitten av skärmen.
• toast-top-full-width: Meddelandet visas längst upp på skärmen och fyller hela skärmens bredd.
• toast-botten-full-bredd: Aviseringen fyller hela skärmens bredd och visas längst ned.

Slutligen showMethod och hideMethod egenskaper styr animeringarna för att visa och dölja meddelandet. De showMethod egenskapen anger animeringen som används för att visa ett meddelande, medan hideMethod egenskapen anger animeringen som används för att dölja ett meddelande.

Meddelandet som definieras i kodblocket ovan visas högst upp i mitten av skärmen, med en förloppsindikator och en stängningsknapp. Den försvinner efter tre sekunder och använder tona-in- och uttoningsövergångar för att visas och försvinna.

Det kommer att se ut ungefär så här.

Observera att du kan anpassa varje Toastr-avisering med ett enda alternativobjekt istället för att anpassa dem en i taget. För att göra detta använder du toastr.alternativ fast egendom. Det här egenskapsobjektet innehåller anpassningsegenskaperna för alla dina Toastr-aviseringar.

Till exempel:

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;

Det här exemplet visar hur du konfigurerar alla aviseringar så att de har en förloppsindikator, en stängningsknapp, en display uppe till höger hörnet av skärmen, stäng automatiskt efter 5 sekunder och använd in- och uttoningsövergångar för att visas och försvinna.

Att köra programmet och klicka på knapparna kommer att återge ett gränssnitt som skulle se ut som bilden nedan.

Gör dina meddelanden interaktiva

Du kan göra dina aviseringar mer engagerande genom att lägga till interaktivitet, till exempel möjligheten att klicka på dem. För att göra detta använder du onclick fast egendom. De onclick egenskapen är ett av de anpassningsalternativ som Toastr-biblioteket tillhandahåller. Den anger en funktion som körs när du klickar på meddelandet, liknande den klickhändelse (en av JavaScripts händelseavlyssnare).

Här är ett exempel på hur man använder onclick fast egendom:

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 kodblocket ovan visas alternativobjektet för toastr.framgång funktionen innehåller en onclick fast egendom. De onclick egendom kallar toastr.clear funktion, som rensar meddelandet från skärmen.

Skapa engagerande aviseringar med Toastr

Här lärde du dig hur du använder Toastr-biblioteket för att skapa engagerande aviseringar för din React-applikation. Du installerade Toastr, konfigurerade den i din app och skapade och anpassade dina aviseringar. Toastr är ett kraftfullt bibliotek som kan hjälpa dig att skapa informativa och visuellt tilltalande meddelanden. Förutom Toastr kan du också prova andra bibliotek som SweetAlert, React-Toastify eller Chakra UI.