SweetAlert-biblioteket gör det enkelt att skapa anpassade meddelandekomponenter i React.

SweetAlert är ett populärt bibliotek som ger dig möjlighet att skapa anpassade meddelandekomponenter för din React-applikation. Du kan använda aviseringar för att varna användare om viktig information, fel eller framgångsrika åtgärder i din applikation. Detta ger en fantastisk användarupplevelse.

Installera SweetAlert-biblioteket

För att använda SweetAlert bibliotek för att skapa aviseringar måste du installera det med valfri pakethanterare.

Du kan installera den via NPM-pakethanterare genom att köra följande kommando i din terminal:

npm installera sweetalert --save

Använder SweetAlert för att skapa aviseringar

Att skapa anpassade aviseringar i din React-app med hjälp av SweetAlert-biblioteket liknar med hjälp av Toastify-biblioteket. De sval funktion som tillhandahålls av SweetAlert-biblioteket skapar en instans av meddelandekomponenten och definierar meddelandets egenskaper.

Här är ett exempel på hur du använder swal() funktion för att skapa en aviseringskomponent:

instagram viewer 
importera Reagera från'reagera'
importera sval från"sötare"
fungeraApp() {


konst meddela = () => sval('Hej där');


lämna tillbaka (






exporterastandard App

Om du klickar på knappen ringer du upp sval funktion, som visar ett meddelande med meddelandet "Hej där".

De sval funktionen tar tre parametrar. Den första parametern är rubriken på meddelandet, den andra parametern är meddelandet och den tredje är ikonen som ska visas i aviseringen.

Du kan ställa in ikon parameter till ett av de fördefinierade värdena, dvs. Framgång, varning, fel, eller info. Meddelandeikonen kommer då att baseras på de värden du passerade.

Till exempel:

importera Reagera från'reagera'
importera sval från"sötare"
fungeraApp() {


konst meddela = () => sval('Hej där', 'Välkommen till min sida', 'Framgång');


lämna tillbaka (






exporterastandard App

När användaren klickar på knappen, anropar den meddela fungera. Den här funktionen visar sedan ett meddelande med meddelandet "Hej där" och "Välkommen till min sida" med en framgångsikon.

Ett alternativ till att använda sval funktion med de tre parametrarna skulle vara att använda sval funktion med objektparametern. Den här objektparametern innehåller egenskaper som definierar meddelandekomponenten.

Till exempel:

importera Reagera från'reagera'
importera sval från"sötare"
fungeraApp() {


konst meddela = () => sval(
 {
 titel: 'Hej där',
 text: 'Välkommen till min sida',
 ikon: 'Framgång',
 knapp: 'OK',
 }
 );


lämna tillbaka (






exporterastandard App

I kodblocket ovan visas sval funktion tar ett objekt med följande egenskaper: titel, text, ikon, och knapp.

De titel egenskapen anger titeln på meddelandet, medan text egenskapen definierar meddelandet. Med ikon egenskap, kan du ange vilken typ av ikon som ska visas i meddelandet.

Slutligen knapp egenskapen anger texten på knappen som visas i meddelandet. I det här fallet visar knappen texten OK.

Anpassa knappegenskapen

Du kan anpassa knapp egenskapen för din aviseringskomponent för att passa dina designbehov. De knapp egenskap tar ett objekt med egenskaper som används för att konfigurera beteendet och utseendet på knappen.

En standardknapp innehåller följande egenskaper:

sval(
 {
 knapp: {
 text: "OK",
 värde: Sann,
 synlig: Sann,
 klassnamn: "",
 closeModal: Sann
 },
 }
 );

I kodblocket ovan används följande egenskaper med knappen:

  • text: Texten som ska visas på knappen.
  • värde: Värdet som ska returneras när användaren klickar på knappen. I det här fallet är värdet Sann.
  • synlig: Ett booleskt värde indikerar om knappen ska vara synlig.
  • klassnamn: En sträng som representerar CSS-klassen som ska tillämpas på knappen.
  • stängModal: Ett booleskt värde som indikerar om modalen ska stängas när knappen klickas.

Du kan också rendera mer än en knapp med hjälp av en array med knappar fast egendom. Arrayen kommer att ta strängar som dess element.

Till exempel:

sval(
 {
 knappar: ["Annullera", "Ok"],
 }
 );

I det här exemplet kommer din aviseringskomponent att innehålla två knappar med texterna Avbryt och Ok. Ställa in knappar egendom till falsk kommer att göra ett meddelande utan knapp.

Återge HTML-element inuti meddelandekomponenten

Du kan också rendera HTML-element förutom vanliga strängar som ett meddelande. Detta ger ett brett utbud av anpassningsalternativ.

Till exempel:

importera Reagera från'reagera'
importera sval från"sötare"
fungeraApp() {


konst meddela = () => sval(
 {
 innehåll: {
 element: 'inmatning',
 attribut: {
 Platshållare: 'Förnamn',
 typ: 'text'
 }
 },
 knappar: 'Bli Medlem'
 }
 )


lämna tillbaka (


"app">


exporterastandard App

I det här exemplet använder du innehåll egenskap för att återge ett inmatningsfält med platshållartext.

Du anger innehållet i meddelandet med hjälp av innehåll egenskapen och HTML-elementet för att rendera med element fast egendom. För att ange HTML-elementets attribut använder du attribut fast egendom.

Kodblocket ovan ger meddelandet nedan när du klickar på knappelementet.

Styling av meddelandekomponenten

Istället för att följa standardformatet för meddelanderuta som tillhandahålls av SweetAlert-biblioteket, kan du anpassa utseendet på meddelanderutan genom att tillämpa dina egna CSS-stilar.

Du kommer att använda klassnamn egendom för att lägga till dina stilar i meddelandet. De klassnamn egenskapen definierar en CSS-klass för meddelandet.

Till exempel:

sval(
 {
 titel: 'Hej där',
 text: 'Välkommen till min sida',
 knapp: falsk,
 klassnamn: 'varna',
 }
 )

Aviseringen i kodblocket ovan har en klassnamn värde varna. Efter att ha skapat meddelandet och definierat klassnamn, kommer du att definiera dina CSS-stilar:

.varna{
bakgrundsfärg: grön;
typsnittsfamilj: kursiv;
gräns-radie: 15px;
}

CSS-stilarna ovan gäller för meddelandet vid rendering:

Stänger aviseringskomponenten

SweetAlert-biblioteket erbjuder flera alternativ för att anpassa hur dina meddelanden stängs. Dessa alternativ är closeOnEsc, closeOnClickOutside, och timer egenskaper.

De closeOnEsc egenskapen avgör om meddelanderutan stängs när användaren trycker på Esc-tangenten på sitt tangentbord. De closeOnEsc egendom får ett booleskt värde.

sval(
 {
 ...,
 closeOnEsc: falsk,
 }
 )

Som standard är closeOnEsc egenskapen är inställd på Sann. I kodblocket ovan ställer du in closeOnEsc egendom till falsk. Genom att ställa in fastigheten till falsk, kan användaren inte stänga meddelanderutan genom att trycka på Esc-tangenten.

Du kan också avgöra om användaren kan stänga meddelanderutan genom att klicka utanför rutan med hjälp av closeOnClickOutside fast egendom.

Om egenskapen är inställd på Sann, den closeOnClickOutside egenskapen möjliggör stängning av meddelanderutan genom att klicka någonstans utanför den. Detta är standardbeteendet för SweetAlert. För att stoppa detta beteende, ställ in closeOnClickOutside egendom till falsk.

sval(
 {
 ...,
 closeOnClickOutside: falsk,
 }
 )

Med timer egendom kan du ställa in en tidsgräns för att meddelanderutan ska stängas automatiskt. De timer egenskapen tar ett heltalsvärde i millisekunder.

sval(
 {
 ...,
 timer: 5000,
 }
 )

I det här exemplet är timer egenskapen är inställd på 5000. Aviseringen kommer bara att vara synlig i 5 sekunder.

Effektiva anpassade meddelanden med SweetAlert

SweetAlert är ett kraftfullt bibliotek med vilket du kan skapa anpassade meddelanden i en React-applikation. Använder bibliotekets sval funktion kan du nu skapa aviseringar med anpassade egenskaper och beteende. Du kan också använda andra bibliotek som React-Toastify för att skapa anpassade varningar i en React-applikation.