Hur man skapar anpassade varningar i React med React-Toastify

Varningsmeddelanden används ofta i webbappar för att visa varningar, fel, framgångsmeddelanden och annan värdefull information.

Det finns några populära paket och ramverk för att skapa varningsmeddelanden i React. React-Toastify är ett React-bibliotek som låter dig lägga till aviseringar och varningsmeddelanden till dina applikationer.

Installerar React Toastify

För att installera Toastify i ditt React-projekt, kör det här kommandot i din projektkatalog:

npm installera --save react-toastify

Konfigurera Toastify

För att använda Toastify-paketet måste du importera ToastContainer, rostat bröd metod och medföljande CSS-fil som tillhandahålls av paketet.

De ToastContainer inuti app-komponenten lagras alla toast-aviseringar som skapats.

importera { ToastContainer, toast } från"reagera-toastify";
importera'react-toastify/dist/ReactToastify.css';
fungeraApp() {
lämna tillbaka(



 </div>
 );
}

Du kan använda rostat bröd metoder för att skapa toastnotiser för ditt React-projekt:

fungeraApp() {
konst meddela = () => toast.success("Hej där!");
lämna tillbaka(


Meddela</button>

 </div>
 );
}

Genom att klicka på knappen som den här koden genererar kommer att anropa toast.framgång metoden och skickar den "Hej där!" sträng. Detta kommer att skapa ett toastmeddelande som visar meddelandet på skärmen, så här:

Observera att det finns olika typer av toastmetoder du kan kalla, som t.ex toast.info(), toast.error(), toast.success(), toast.warning(). Var och en av dessa metoder har en subtil färgstil för att återspegla typen av budskap.

Placera dina Toast-aviseringar

Som standard dyker toastaviseringar upp från den övre högra sidan av webbappens skärm. Du kan ändra detta genom att ställa in egenskapen position på ToastContainer. Det finns sex tillgängliga positionsvärden: upptill höger, övre mitten, övre vänstra, nedre höger, nedre mitten och nedre vänster.

Till exempel:

fungeraApp() {
konst meddela = () => toast.success("Hej där!");
lämna tillbaka(


Meddela</button>
"övre vänstra"/>
 </div>
 );
}

Ställa in positionsstödet på ToastContainer uppe till vänster säkerställer att alla toastaviseringar dyker upp från den övre vänstra sidan av skärmen.

Du kan ändra standardpositionen för individuella toastmeddelanden genom att använda positionsstödet på rostat bröd metoder:

fungeraApp() {
konst meddela = () => toast.success("Hej där!", {placera: rostat bröd. POSITION.TOP_CENTER});
lämna tillbaka(


Meddela</button>
"övre vänstra"/>
 </div>
 );
}

Du kan också placera Toast-aviseringar använder egenskapen CSS position, men Toastifys positionsstöd är standardsättet att göra detta.

Hantera autoClose Prop för Toast Method och ToastContainer

Du kan ändra visningstiden för toastaviseringar. Du kan styra hur länge en toastavisering förblir öppen med hjälp av autoStäng stötta. Du kan ändra fördröjningstiden för alla toastaviseringar och individuella toastaviseringar. De autoStäng prop accepterar bara det booleska värdet false eller en varaktighet i millisekunder.

För att ändra fördröjningstiden för alla toastaviseringar, använd autoStäng prop inom ToastContainer element.

Till exempel:

fungeraApp() {
konst meddela = () => toast.success("Hej där!");
lämna tillbaka(


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

Med ovanstående inställningar kommer alla toastaviseringar att visas i exakt fem sekunder (5 000 millisekunder).

Använda autoStäng egendom för var och en rostat bröd metoden kan du anpassa fördröjningstiden för individuella toastmeddelanden.

Till exempel:

fungeraApp() {
konst notifyOne = () => toast.info("Stänger om 10 sekunder", {autoStäng: 10000});
konst notifyTwo = () => toast.info("Stänger om 15 sekunder", {autoStäng: 15000});
lämna tillbaka (


Meddela One</button>
Meddela två</button>

 </div>
 );
}

För att förhindra att toastaviseringen stängs som standard kan du ställa in autoStäng stötta till falsk. Du kan säkerställa att användaren manuellt måste stänga varje toastmeddelande genom att ställa in autoStäng rekvisita av ToastContainer till falskt.

Till exempel:

fungeraApp() {
konst meddela = () => toast.info("Hej där!");
lämna tillbaka (


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

Ställa in autoStäng rekvisita av individ rostat bröd metoder för att falsk kommer också att säkerställa att dessa specifika toast-meddelanden inte stängs som standard.

Återge icke-stränga aviseringar med Toastify

Du kan rendera strängar, reagera komponenter och siffror som aviseringsmeddelanden när du arbetar med toast-aviseringar. För att göra en React-komponent som en toast-avisering skapar du komponenten och återger den med en rostat bröd metod.

Till exempel:

fungeraMeddelande({toastProps, closeToast}) {
lämna tillbaka (


Välkommen {toastProps.position}</p>
</button>
 </div>
 )
}
exporterastandard Meddelande;

Detta kodblock skapar en komponent, Meddelande. När du renderar en komponent som ett meddelande, lägger toast till toastProps och closeToast rekvisita till din komponent. De closeToast prop är en funktion som du kan använda för att stänga aviseringen. De toastProps prop är ett objekt med egenskaper som lagrar detaljer om toastmeddelandet inklusive dess position, typ och andra egenskaper.

Importera Message-komponenten och skicka den sedan till toast()-funktionen, vilket gör den som en toast-avisering:

importera { ToastContainer, toast } från"reagera-toastify";
importera'react-toastify/dist/ReactToastify.css';
importera Meddelande från"./komponenter/Meddelande";
fungeraApp() {
konst msg = () => rostat bröd(<Meddelande />);
lämna tillbaka (


Välkommen</button>

 </div>
 );
}

Om du klickar på knappen visas ett meddelande som innehåller en fråga och två knappar på din skärm.

Styling Toast Notifications

Du behöver inte använda standardstilen för dina toastaviseringar. Du kan anpassa dem för att passa ett önskat designtema eller mönster som passar din webbapplikation.

För att styla din toastavisering, ge den ett klassnamn och tillämpa anpassningarna i en CSS-fil.

Till exempel:

fungeraApp() {
konst meddela = () => toast.success("Hej där!", {klassnamn: "toast-meddelande"});
lämna tillbaka (


Meddela</button>
"top-center" />
 </div>
 );
}

Med klassnamn bifogas till din notifiering kan du stila toast-meddelandet efter dina önskemål i CSS-filen:

.toast-meddelande {
bakgrundsfärg: #000000;
Färg: #FFFFFF;
textstorlek: 20px;
stoppning: 1rem 0.5rem;
}

Som ett resultat av ovanstående anpassade stil kommer meddelandet att se ut så här:

Toast-meddelanden för din webbapplikation

Du kan nu skapa anpassade varningar i React med hjälp av React-Toastify-paketet och dess tillgängliga metoder. Genom att utforma dessa anpassade varningar/aviseringar efter dina önskemål kan du förbättra användarupplevelsen av din webbapplikation.

React-Toastify erbjuder en snabb och effektiv metod för att inkludera anpassade varningar i ditt React-projekt utan krångel.