Hvordan lage tilpassede varsler i React ved å bruke React-Toastify

Varslingsmeldinger brukes ofte i nettapper for å vise advarsler, feil, suksessmeldinger og annen verdifull informasjon.

Det er noen få populære pakker og rammer for å lage varselmeldinger i React. React-Toastify er et React-bibliotek som lar deg legge til varsler og varslingsmeldinger til applikasjonene dine.

Installerer React Toastify

For å installere Toastify i React-prosjektet ditt, kjør denne kommandoen i prosjektkatalogen din:

npm install --save react-toastify

Sette opp Toastify

For å bruke Toastify-pakken, må du importere ToastContainer, skål metode og tilhørende CSS-fil levert av pakken.

De ToastContainer inne i App-komponenten lagrer alle toast-varsler som er opprettet.

import { ToastContainer, toast } fra"reager-toastify";
import'react-toastify/dist/ReactToastify.css';
funksjonApp() {
komme tilbake(



 </div>
 );
}

Du kan bruke skål metoder for å lage toast-varsler for React-prosjektet ditt:

funksjonApp() {
konst gi beskjed = () => toast.success("Hei der!");
komme tilbake(


Varsle</button>

 </div>
 );
}

Ved å klikke på knappen som denne koden genererer, kalles den toast.suksess metoden, og gir den "Hello There!" streng. Dette vil lage et toastvarsel som viser meldingen på skjermen, slik:

Merk at det er forskjellige typer toastmetoder du kan kalle, som f.eks toast.info(), toast.error(), toast.success(), toast.warning(). Hver av disse metodene har en subtil fargestyling som gjenspeiler typen melding.

Plassering av Toast-varslene dine

Som standard dukker toast-varsler opp fra øverste høyre side av nettappens skjerm. Du kan endre dette ved å sette egenskapen posisjon på ToastContainer. Det er seks tilgjengelige posisjonsverdier: øverst til høyre, øverst i midten, øverst til venstre, nederst til høyre, nederst i midten og nederst til venstre.

For eksempel:

funksjonApp() {
konst gi beskjed = () => toast.success("Hei der!");
komme tilbake(


Varsle</button>
"øverst til venstre"/>
 </div>
 );
}

Stille inn posisjonsstøtten på ToastContainer øverst til venstre sørger for at alle toast-varsler dukker opp fra øverste venstre side av skjermen.

Du kan endre standardposisjonen for individuelle toastvarsler ved å bruke posisjonsstøtten til skål metoder:

funksjonApp() {
konst gi beskjed = () => toast.success("Hei der!", {posisjon: toast. POSITION.TOP_CENTER});
komme tilbake(


Varsle</button>
"øverst til venstre"/>
 </div>
 );
}

Du kan også plassere Toast-varsler ved å bruke egenskapen CSS-posisjon, men Toastifys posisjonsstøtte er standardmåten å gjøre dette på.

Håndtering av autoClose Prop for Toast Method og ToastContainer

Du kan endre visningstiden for toastvarsler. Du kan kontrollere hvor lenge en toast-varsling forblir åpen ved å bruke autoLukk rekvisitt. Du kan endre forsinkelsestiden for alle toast-varsler og individuelle toast-varsler. De autoLukk prop godtar bare den boolske verdien false eller en varighet i millisekunder.

For å endre forsinkelsestiden for alle toast-varsler, bruk autoLukk prop innenfor ToastContainer element.

For eksempel:

funksjonApp() {
konst gi beskjed = () => toast.success("Hei der!");
komme tilbake(


Varsle</button>
5000}/>
 </div>
 );
}

Med innstillingene ovenfor vil alle toast-varsler vises i nøyaktig fem sekunder (5000 millisekunder).

Bruker autoLukk eiendom til hver skål metode, kan du tilpasse forsinkelsestiden for individuelle toast-varsler.

For eksempel:

funksjonApp() {
konst notifyOne = () => toast.info("Stenges om 10 sekunder", {autoLukk: 10000});
konst varsleTwo = () => toast.info("Stenges om 15 sekunder", {autoLukk: 15000});
komme tilbake (


Varsle One</button>
Varsle to</button>

 </div>
 );
}

For å forhindre at toast-varslingen lukkes som standard, kan du angi autoLukk støtte til falsk. Du kan sikre at brukeren manuelt må lukke hver toast-varsling ved å stille inn autoLukk rekvisitt av ToastContainer til falsk.

For eksempel:

funksjonApp() {
konst gi beskjed = () => toast.info("Hei der!");
komme tilbake (


Varsle</button>
falsk} />
 </div>
 );
}

Innstilling av autoLukk rekvisitt av individ skål metoder for å falsk vil også sikre at de spesifikke toast-varslene ikke lukkes som standard.

Gjengivelse av ikke-strengvarsler med Toastify

Du kan gjengi strenger, reagere komponenter og tall som varslingsmeldinger når du arbeider med toast-varsler. For å gjengi en React-komponent som en toast-varsling, oppretter du komponenten og gjengir den ved hjelp av en skål metode.

For eksempel:

funksjonBeskjed({toastProps, closeToast}) {
komme tilbake (


Velkommen {toastProps.position}</p>
</button>
 </div>
 )
}
eksportmisligholde Beskjed;

Denne kodeblokken lager en komponent, Beskjed. Når du gjengir en komponent som et varsel, legger toast til toastProps og closeToast rekvisitter til komponenten din. De closeToast prop er en funksjon som du kan bruke for å lukke varselet. De toastProps prop er et objekt med egenskaper som lagrer detaljer om toastvarslingen, inkludert dens posisjon, type og andre egenskaper.

Importer meldingskomponenten, send den deretter til toast()-funksjonen, og gjengi den som en toast-varsling:

import { ToastContainer, toast } fra"reager-toastify";
import'react-toastify/dist/ReactToastify.css';
import Beskjed fra"./components/Message";
funksjonApp() {
konst melding = () => skål(<Beskjed />);
komme tilbake (


Velkommen</button>

 </div>
 );
}

Hvis du klikker på knappen, vises et varsel som inneholder et spørsmål og to knapper på skjermen.

Styling Toast-varsler

Du trenger ikke bruke standardstilen for toastvarslene dine. Du kan tilpasse dem for å passe et ønsket designtema eller mønster som passer til nettapplikasjonen din.

For å style toastvarslingen din, gi den en klassenavn og bruke tilpasningene i en CSS-fil.

For eksempel:

funksjonApp() {
konst gi beskjed = () => toast.success("Hei der!", {klassenavn: "toast-melding"});
komme tilbake (


Varsle</button>
"topp-senter" />
 </div>
 );
}

Med klassenavn vedlagt varselet ditt, kan du style toast-varslingen etter dine preferanser i CSS-filen:

.toast-melding {
bakgrunnsfarge: #000000;
farge: #FFFFFF;
skriftstørrelse: 20px;
polstring: 1rem 0.5rem;
}

Som et resultat av den tilpassede stilen ovenfor, vil varselet se slik ut:

Toast-varsler for nettapplikasjonen din

Du kan nå opprette tilpassede varsler i React ved å bruke React-Toastify-pakken og dens tilgjengelige metoder. Ved å style disse tilpassede varslene/varslingene etter dine preferanser, kan du forbedre brukeropplevelsen til nettapplikasjonen din.

React-Toastify tilbyr en rask og effektiv metode for å inkludere tilpassede varsler i ditt React-prosjekt uten oppstyr.