Boeiende meldingen maken met Toastr in React

Meldingen zijn essentieel voor elke webtoepassing omdat ze gebruikers belangrijke informatie verschaffen. In plaats van het meldingssysteem helemaal opnieuw op te bouwen, kunt u gebruikmaken van externe bibliotheken. Toastr is een van de populaire bibliotheken voor het maken van meldingen in JavaScript-toepassingen.

De Toastr-bibliotheek installeren

Begin eerst met het maken van een React-applicatie waarmee u gaat werken. Jij kan maak een React-applicatie met Vite.

Nadat u de toepassing hebt gemaakt, installeert u het broodrooster package in uw project door de volgende opdracht in uw terminal uit te voeren:

npm install --save toastr

Nu heb je de broodrooster pakket en kan het gebruiken om meldingen weer te geven.

Meldingen maken met Toastr

Om de meldingen te maken, gebruikt u de broodrooster functie. De broodrooster functie wordt gebruikt om toastberichten te maken en weer te geven. Voordat u uw meldingen maakt, moet u ervoor zorgen dat u uw

broodrooster meldingsstijlen in uw CSS-bestand.

@import'toastr';

Hier is een voorbeeld van hoe u een melding maakt met behulp van de broodrooster functie:

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;

In dit voorbeeld definieert u een melden functie. De Klik hier knop roept de melden functie wanneer u erop klikt. De melden functie gebruikt de toastr.succes functie om een ​​succesmelding weer te geven.

De toastr.succes functie neemt twee argumenten. Het eerste argument is het meldingsbericht, in dit geval de tekenreeks "Het is fijn dat je er bent". Het tweede argument is de titel van de melding, "Welkom".

Er verschijnt een melding die lijkt op de volgende afbeelding wanneer u op de Klik hier knop.

Naast de toastr.succes functie, de broodrooster object biedt andere functies voor het maken van meldingen. De andere functies zijn de toastr.fout, toastr.waarschuwing, En toastr.info. Elke functie maakt een melding aan met een andere achtergrondkleur en icoon, zodat je gemakkelijk onderscheid kunt maken tussen verschillende soorten meldingen.

Wanneer u bijvoorbeeld de toastr.fout functie, ziet uw melding er als volgt uit:

Uw meldingen aanpassen

Met de Toastr-bibliotheek kunt u uw meldingen niet aanpassen met traditionele CSS, in tegenstelling tot bij het werken met React-Toastify. Toastr biedt echter nog steeds andere opties voor het aanpassen van meldingen. U kunt deze opties gebruiken om de positie, het uiterlijk en de functionaliteit van uw meldingen aan te passen. U moet de opties doorgeven aan het derde argument van de broodrooster methode.

Hier is een voorbeeld:

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;

Om de melding aan te passen, gebruikt deze code de closeButton, voortgangsbalk, time-out, positieKlasse, showMethode, En hideMethode eigenschappen van het optieobject. De closeButton eigenschap bepaalt of uw melding wordt weergegeven met een sluitknop. Het accepteert een booleaanse waarde.

De... gebruiken voortgangsbalk eigenschap, kunt u een voortgangsbalk aan de melding toevoegen. Het instellen van de time-out eigenschap kunt u bepalen hoe lang een melding wordt weergegeven. Deze eigenschap specificeert het aantal milliseconden voordat de melding automatisch verdwijnt.

De positieKlasse eigenschap definieert de positie van de melding op uw scherm. Het accepteert acht vooraf gedefinieerde waarden. De waarden omvatten:

• toast-rechtsboven: Toont de melding in de rechterbovenhoek van uw scherm.
• toast-linksboven: De melding wordt weergegeven in de linkerbovenhoek van uw scherm.
• toast-top-center: De melding verschijnt bovenaan in het midden van uw scherm.
• toast-rechtsonder: U ziet de melding in de rechterbenedenhoek van uw scherm.
• toast-linksonder: De melding wordt in de linkerbenedenhoek van uw scherm geplaatst.
• toast-bottom-center: U vindt de melding midden onderaan het scherm.
• toast-top-volledige breedte: De melding verschijnt bovenaan uw scherm en vult de volledige schermbreedte.
• toast-bodem-volledige breedte: De melding vult de gehele breedte van uw scherm en wordt onderaan weergegeven.

Als laatste de showMethode En hideMethode eigenschappen bepalen de animaties voor het weergeven en verbergen van de melding. De showMethode eigenschap specificeert de animatie die wordt gebruikt om een ​​melding weer te geven, terwijl de hideMethode eigenschap specificeert de animatie die wordt gebruikt om een ​​melding te verbergen.

De melding die in het bovenstaande codeblok is gedefinieerd, verschijnt in het midden bovenaan uw scherm, met een voortgangsbalk en een sluitknop. Het verdwijnt na drie seconden en gebruikt fade-in en fade-out overgangen om te verschijnen en te verdwijnen.

Het zal er ongeveer zo uitzien.

Merk op dat u elke Toastr-melding kunt aanpassen met een enkel optie-object in plaats van ze een voor een aan te passen. Hiervoor maak je gebruik van de toastr.opties eigendom. Dit eigenschapsobject bevat de aanpassingseigenschappen van al uw Toastr-meldingen.

Bijvoorbeeld:

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;

Dit voorbeeld laat zien hoe u alle meldingen configureert met een voortgangsbalk, een sluitknop, een weergave in de rechterbovenhoek hoek van het scherm, sluit automatisch na 5 seconden en gebruik fade-in en fade-out overgangen om te verschijnen en verdwijnen.

Als u de toepassing uitvoert en op de knoppen klikt, wordt een interface weergegeven die eruitziet als de onderstaande afbeelding.

Maak uw meldingen interactief

U kunt uw meldingen aantrekkelijker maken door interactiviteit toe te voegen, zoals de mogelijkheid om erop te klikken. Hiervoor gebruik je de bij klikken eigendom. De bij klikken eigenschap is een van de aanpassingsopties die de Toastr-bibliotheek biedt. Het specificeert een functie die wordt uitgevoerd wanneer u op de melding klikt, vergelijkbaar met de klikgebeurtenis (een van de gebeurtenislisteners van JavaScript).

Hier is een voorbeeld van het gebruik van de bij klikken eigendom:

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;

In het bovenstaande codeblok is het options-object van het toastr.succes functie bevat een bij klikken eigendom. De bij klikken eigenschap noemt de broodrooster.helder functie, die de melding van het scherm verwijdert.

Maak boeiende meldingen met behulp van Toastr

Hier heb je geleerd hoe je de Toastr-bibliotheek kunt gebruiken om boeiende meldingen voor je React-applicatie te maken. Je hebt Toastr geïnstalleerd, ingesteld in je app en je meldingen gemaakt en aangepast. Toastr is een krachtige bibliotheek die u kan helpen bij het maken van informatieve en visueel aantrekkelijke meldingen. Naast Toastr kun je ook andere bibliotheken proberen, zoals SweetAlert, React-Toastify of Chakra UI.