Hoe maak je een aangepaste meldingscomponent in React met behulp van SweetAlert

SweetAlert is een populaire bibliotheek waarmee u aangepaste meldingscomponenten voor uw React-toepassing kunt maken. U kunt meldingen gebruiken om gebruikers te waarschuwen voor belangrijke informatie, fouten of geslaagde acties binnen uw toepassing. Dit draagt ​​bij aan een geweldige gebruikerservaring.

De SweetAlert-bibliotheek installeren

Om de SweetAlert bibliotheek om meldingen te maken, moet u deze installeren met een pakketbeheerder naar keuze.

U kunt het installeren via de NPM-pakketbeheerder door het volgende commando in je terminal uit te voeren:

npm install sweetalert --save

SweetAlert gebruiken om meldingen te maken

Het maken van aangepaste meldingen in uw React-app met behulp van de SweetAlert-bibliotheek is vergelijkbaar met met behulp van de Toastify-bibliotheek. De zwal functie die door de SweetAlert-bibliotheek wordt geleverd, maakt een instantie van de meldingscomponent en definieert de eigenschappen van de melding.

Hier is een voorbeeld van het gebruik van de slikken() functie om een ​​meldingscomponent te maken:

importeren Reageer van'Reageer'
importeren zwal van'zoetwaarschuwing'
functieapp() {
const melden = () => slikken('Hallo daar');
opbrengst (



Klik op mij</button>
 </div>
 )
}
exporterenstandaard app

Als u op de knop klikt, wordt de zwal functie, die een melding zal weergeven met het bericht "Hallo daar".

De zwal functie neemt drie parameters. De eerste parameter is de titel van de melding, de tweede parameter is het bericht en de derde is het pictogram dat in uw melding moet worden weergegeven.

U kunt de icoon parameter naar een van de vooraf gedefinieerde waarden, d.w.z. succes, waarschuwing, fout, of informatie. Het meldingspictogram is dan gebaseerd op de waarden die u hebt doorgegeven.

Bijvoorbeeld:

importeren Reageer van'Reageer'
importeren zwal van'zoetwaarschuwing'
functieapp() {
const melden = () => slikken('Hallo daar', 'Welkom op mijn pagina', 'succes');
opbrengst (



Klik op mij</button>
 </div>
 )
}
exporterenstandaard app

Wanneer de gebruiker op de knop klikt, roept het de melden functie. Deze functie geeft dan een melding weer met het bericht "Hallo daar" en "Welkom op mijn pagina" met een succespictogram.

Een alternatief voor het gebruik van de zwal functie met de drie parameters zou zijn om de zwal functie met de objectparameter. Deze objectparameter bevat eigenschappen die de meldingscomponent definiëren.

Bijvoorbeeld:

importeren Reageer van'Reageer'
importeren zwal van'zoetwaarschuwing'
functieapp() {
const melden = () => slikken(
 {
 titel: 'Hallo daar',
 tekst: 'Welkom op mijn pagina',
 icoon: 'succes',
 knop: 'OK',
 }
 );
opbrengst (



Klik op mij</button>
 </div>
 )
}
exporterenstandaard app

In het codeblok hierboven, de zwal functie neemt een object met de volgende eigenschappen: titel, tekst, icoon, En knop.

De titel eigenschap specificeert de titel van de melding, terwijl de tekst eigenschap definieert het bericht. Met de icoon eigenschap, kunt u het type pictogram specificeren dat in de melding wordt weergegeven.

Als laatste de knop eigenschap specificeert de tekst van de knop die wordt weergegeven in de melding. In dit geval geeft de knop de tekst weer OK.

De knopeigenschap aanpassen

U kunt de knop eigenschap van uw meldingscomponent om aan uw ontwerpbehoeften te voldoen. De knop property neemt een object met eigenschappen die worden gebruikt om het gedrag en uiterlijk van de knop te configureren.

Een standaardknop bevat de volgende eigenschappen:

slikken(
 {
 knop: {
 tekst: "OK",
 waarde: WAAR,
 zichtbaar: WAAR,
 naam van de klasse: "",
 closeModal: WAAR
 },
 }
 );

In het bovenstaande codeblok worden de volgende eigenschappen gebruikt met de knop:

• tekst: De tekst die op de knop moet worden weergegeven.
• waarde: De waarde die moet worden geretourneerd wanneer de gebruiker op de knop klikt. In dit geval is de waarde WAAR.
• zichtbaar: Een booleaanse waarde geeft aan of de knop zichtbaar moet zijn.
• naam van de klasse: Een tekenreeks die de CSS-klasse vertegenwoordigt die op de knop moet worden toegepast.
• closeModal: Een booleaanse waarde die aangeeft of de modal moet worden gesloten wanneer op de knop wordt geklikt.

U kunt ook meer dan één knop renderen met behulp van een array met de toetsen eigendom. De array neemt strings als elementen.

Bijvoorbeeld:

slikken(
 {
 toetsen: ["Annuleren", "OK"],
 }
 );

In dit voorbeeld bevat uw meldingscomponent twee knoppen met de teksten ' annuleren En OK. Het instellen van de toetsen eigendom aan vals geeft een melding weer zonder knop.

HTML-elementen weergeven in de meldingscomponent

U kunt ook HTML-elementen renderen, afgezien van gewone tekenreeksen, als een melding. Dit biedt een breed scala aan aanpassingsmogelijkheden.

Bijvoorbeeld:

importeren Reageer van'Reageer'
importeren zwal van'zoetwaarschuwing'
functieapp() {
const melden = () => slikken(
 {
 inhoud: {
 element: 'invoer',
 attributen: {
 tijdelijke aanduiding: 'Voornaam',
 type: 'tekst'
 }
 },
 toetsen: 'Aanmelden'
 }
 )
opbrengst (

"app">
Klik op mij</button>
 </div>
 )
}
exporterenstandaard app

In dit voorbeeld gebruik je de inhoud eigenschap om een ​​invoerveld met plaatsaanduidingstekst weer te geven.

U specificeert de inhoud van de melding met behulp van de inhoud eigenschap en het HTML-element om te renderen met de element eigendom. Om de attributen van het HTML-element te specificeren, gebruikt u de attributen eigendom.

Het bovenstaande codeblok geeft de onderstaande melding weer wanneer u op het knopelement klikt.

Styling van de meldingscomponent

In plaats van vast te houden aan de standaardnotificatieboxstijl van de SweetAlert-bibliotheek, kunt u het uiterlijk van de notificatiebox aanpassen door het toepassen van uw eigen CSS-stijlen.

Je maakt gebruik van de naam van de klasse eigenschap om uw stijlen aan de melding toe te voegen. De naam van de klasse eigenschap definieert een CSS-klasse voor de melding.

Bijvoorbeeld:

slikken(
 {
 titel: 'Hallo daar',
 tekst: 'Welkom op mijn pagina',
 knop: vals,
 naam van de klasse: 'waarschuwen',
 }
 )

De melding in het codeblok hierboven heeft een naam van de klasse waarde alarm. Na het maken van de melding en het definiëren van de naam van de klasse, definieert u uw CSS-stijlen:

.waarschuwing{
Achtergrond kleur: groente;
font-familie: cursief;
grensradius: 15px;
}

De bovenstaande CSS-stijlen zijn van toepassing op de melding bij weergave:

De meldingscomponent sluiten

De SweetAlert-bibliotheek biedt verschillende opties om de manier aan te passen waarop uw meldingen worden gesloten. Deze opties zijn de closeOnEsc, closeOnClickOutside, En timer eigenschappen.

De closeOnEsc eigenschap bepaalt of het meldingsvenster wordt gesloten wanneer de gebruiker op de Esc-toets op zijn toetsenbord drukt. De closeOnEsc eigenschap neemt een booleaanse waarde aan.

slikken(
 {
 ...,
 closeOnEsc: vals,
 }
 )

Standaard is de closeOnEsc eigenschap is ingesteld op WAAR. In het bovenstaande codeblok stelt u de closeOnEsc eigendom aan vals. Door de eigenschap in te stellen op vals, kan de gebruiker het meldingsvenster niet sluiten door op de Esc-toets te drukken.

U kunt ook bepalen of de gebruiker het meldingsvak kan sluiten door buiten het vak te klikken met behulp van de closeOnClickOutside eigendom.

Als de eigenschap is ingesteld op WAAR, de closeOnClickOutside eigenschap maakt het sluiten van het meldingsvenster mogelijk door ergens daarbuiten te klikken. Dit is het standaardgedrag van SweetAlert. Om dit gedrag te stoppen, stelt u de closeOnClickOutside eigendom aan vals.

slikken(
 {
 ...,
 closeOnClickOutside: vals,
 }
 )

Met de timer eigenschap, kunt u een tijdslimiet instellen voor het notificatievenster om zichzelf automatisch te sluiten. De timer eigenschap neemt een geheel getal in milliseconden.

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

In dit voorbeeld is de timer eigenschap is ingesteld op 5000. De melding is slechts 5 seconden zichtbaar.

Efficiënte aangepaste meldingen met behulp van SweetAlert

SweetAlert is een krachtige bibliotheek waarmee u aangepaste meldingen kunt maken in een React-toepassing. Gebruik maken van de bibliotheek zwal functie, kunt u nu meldingen maken met aangepaste eigenschappen en gedragingen. U kunt ook gebruikmaken van andere bibliotheken zoals React-Toastify om aangepaste waarschuwingen te maken in een React-toepassing.