Bygg engasjerende varsler med Toastr i React

Varsler er avgjørende for enhver nettapplikasjon, da de gir brukerne viktig informasjon. I stedet for å bygge varslingssystemet fra bunnen av, kan du benytte deg av eksterne biblioteker. Toastr er et av de populære bibliotekene for å lage varsler i JavaScript-applikasjoner.

Installere Toastr-biblioteket

Start først med å lage en React-applikasjon du skal jobbe med. Du kan lag en React-applikasjon ved hjelp av Vite.

Etter å ha opprettet applikasjonen, installer toastr pakken i prosjektet ditt ved å kjøre følgende kommando i terminalen din:

npm install --save toastr

Nå har du installert toastr pakken og kan bruke den til å vise varsler.

Opprette varsler ved hjelp av Toastr

For å opprette varslene bruker du toastr funksjon. De toastr funksjonen brukes til å lage og vise toast-meldinger. Før du oppretter varslene dine, sørg for at du importerer dine toastr varslingsstiler i CSS-filen din.

@import'toastr';

Her er et eksempel på hvordan du oppretter et varsel ved å bruke toastr funksjon:

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 eksemplet definerer du en gi beskjed funksjon. De Klikk på meg knappen kaller gi beskjed funksjon når du klikker på den. De gi beskjed funksjonen bruker toastr.suksess funksjon for å vise et suksessvarsel.

De toastr.suksess funksjonen tar to argumenter. Det første argumentet er varslingsmeldingen som i dette tilfellet er strengen "Det er hyggelig å ha deg her". Det andre argumentet er varslingstittelen, "Velkommen".

Et varsel som ligner på følgende bilde vises når du klikker på Klikk på meg knapp.

I tillegg til det toastr.suksess funksjon, den toastr objekt gir andre funksjoner for å lage varsler. De andre funksjonene er toastr.feil, toastr.advarsel, og toastr.info. Hver funksjon lager et varsel med en annen bakgrunnsfarge og ikon, slik at du enkelt kan skille mellom ulike typer varsler.

For eksempel, når du bruker toastr.feil funksjon, vil varselet ditt se slik ut:

Tilpasse varslene dine

Med Toastr-biblioteket kan du ikke tilpasse varslene dine ved å bruke tradisjonell CSS, i motsetning til når du jobber med React-Toastify. Toastr gir imidlertid fortsatt andre alternativer for å tilpasse varsler. Du kan bruke disse alternativene til å tilpasse varslenes plassering, utseende og funksjonalitet. Du må sende alternativene til det tredje argumentet 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 å tilpasse varselet bruker denne koden close-knappen, fremdriftslinje, pause, posisjonKlasse, showMethod, og skjulemetode egenskapene til opsjonsobjektet. De close-knappen egenskapen bestemmer om varselet ditt skal vises med en lukkeknapp. Den aksepterer en boolsk verdi.

Bruker fremdriftslinje eiendom, kan du legge til en fremdriftslinje i varselet. Innstilling av pause egenskap lar deg kontrollere hvor lenge et varsel skal vises. Denne egenskapen spesifiserer antall millisekunder før varselet automatisk forsvinner.

De posisjonKlasse egenskap definerer plasseringen av varselet på skjermen. Den aksepterer åtte forhåndsdefinerte verdier. Verdiene inkluderer:

• toast-øverst-høyre: Viser varselet øverst til høyre på skjermen.
• toast-øverst-venstre: Varslingen vises øverst til venstre på skjermen.
• toast-topp-senter: Varslingen vises øverst i midten av skjermen.
• toast-nederst-høyre: Du vil se varselet nederst til høyre på skjermen.
• toast-nederst-venstre: Varslingen er plassert nederst til venstre på skjermen.
• toast-bunn-senter: Du finner varselet nederst på midten av skjermen.
• toast-topp-full bredde: Varslingen vises øverst på skjermen, og fyller hele skjermens bredde.
• toast-bunn-full bredde: Varslingen fyller hele bredden av skjermen og vises nederst.

Til slutt, den showMethod og skjulemetode egenskaper kontrollerer animasjonene for å vise og skjule varslingen. De showMethod egenskapen spesifiserer animasjonen som brukes til å vise et varsel, mens skjulemetode egenskapen spesifiserer animasjonen som brukes til å skjule et varsel.

Varslingen som er definert i kodeblokken ovenfor, vises øverst i midten av skjermen, med en fremdriftslinje og en lukkeknapp. Den vil forsvinne etter tre sekunder og bruke fade-in og fade-out overganger for å vises og forsvinne.

Det vil se noe slikt ut.

Merk at du kan tilpasse hver Toastr-varsling med et enkelt alternativobjekt i stedet for å tilpasse dem én om gangen. For å gjøre dette, bruker du toastr.alternativer eiendom. Dette egenskapsobjektet inneholder tilpasningsegenskapene til alle Toastr-varslene dine.

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 eksemplet viser hvordan du konfigurerer alle varsler til å ha en fremdriftslinje, en lukkeknapp, en visning øverst til høyre hjørnet av skjermen, lukk automatisk etter 5 sekunder, og bruk fade-in og fade-out overganger for å vises og forsvinne.

Å kjøre applikasjonen og klikke på knappene vil gjengi et grensesnitt som vil se ut som bildet nedenfor.

Gjør varslene dine interaktive

Du kan gjøre varslene dine mer engasjerende ved å legge til interaktivitet, for eksempel muligheten til å klikke på dem. For å gjøre dette bruker du ved trykk eiendom. De ved trykk egenskapen er et av tilpasningsalternativene Toastr-biblioteket tilbyr. Den spesifiserer en funksjon som kjører når du klikker på varselet, som ligner på klikkhendelse (en av JavaScripts hendelseslyttere).

Her er et eksempel på hvordan du bruker ved trykk eiendom:

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 alternativobjektet til toastr.suksess funksjonen inneholder en ved trykk eiendom. De ved trykk eiendommen kaller toastr.clear funksjon, som sletter varselet fra skjermen.

Lag engasjerende varsler ved hjelp av Toastr

Her lærte du hvordan du bruker Toastr-biblioteket til å bygge engasjerende varsler for React-applikasjonen din. Du installerte Toastr, satte den opp i appen din og opprettet og tilpasset varslene dine. Toastr er et kraftig bibliotek som kan hjelpe deg med å lage informative og visuelt tiltalende varsler. Bortsett fra Toastr, kan du også prøve andre biblioteker som SweetAlert, React-Toastify eller Chakra UI.