Kuinka luoda mukautettu ilmoituskomponentti Reactissa SweetAlertin avulla

SweetAlert on suosittu kirjasto, jonka avulla voit luoda mukautettuja ilmoituskomponentteja React-sovelluksellesi. Voit käyttää ilmoituksia varoittaaksesi käyttäjiä tärkeistä tiedoista, virheistä tai onnistuneista toimista sovelluksessasi. Tämä lisää erinomaisen käyttökokemuksen.

SweetAlert-kirjaston asentaminen

Käyttääksesi SweetAlert kirjasto, jotta voit luoda ilmoituksia, sinun on asennettava se käyttämällä mitä tahansa valitsemaasi paketinhallintaa.

Voit asentaa sen kautta NPM-pakettien hallinta suorittamalla seuraavan komennon terminaalissasi:

npm install sweetalert --save

SweetAlertin käyttäminen ilmoitusten luomiseen

Mukautettujen ilmoitusten luominen React-sovelluksessa SweetAlert-kirjaston avulla on samanlaista kuin käyttämällä Toastify-kirjastoa. The swal SweetAlert-kirjaston tarjoama toiminto luo ilmoituskomponentin esiintymän ja määrittää ilmoituksen ominaisuudet.

Tässä on esimerkki swal() toiminto ilmoituskomponentin luomiseksi:

tuonti Reagoi alkaen'reagoi'
tuonti swal alkaen'sweetalert'
toimintoSovellus() {
konst ilmoittaa = () => swal('Hei siellä');
palata (



Napsauta Minä</button>
 </div>
 )
}
viedäoletuksena Sovellus

Napsauttamalla painiketta kutsutaan swal toiminto, joka näyttää ilmoituksen "Hei siellä" -viestillä.

The swal toiminto ottaa kolme parametria. Ensimmäinen parametri on ilmoituksen otsikko, toinen parametri on viesti ja kolmas on ilmoituksessasi näkyvä kuvake.

Voit asettaa kuvake parametri johonkin ennalta määritetyistä arvoista, esim. menestys, Varoitus, virhe, tai tiedot. Ilmoituskuvake perustuu sitten välittämiisi arvoihin.

Esimerkiksi:

tuonti Reagoi alkaen'reagoi'
tuonti swal alkaen'sweetalert'
toimintoSovellus() {
konst ilmoittaa = () => swal('Hei siellä', 'Tervetuloa sivulleni', 'menestys');
palata (



Napsauta Minä</button>
 </div>
 )
}
viedäoletuksena Sovellus

Kun käyttäjä napsauttaa painiketta, se kutsuu ilmoittaa toiminto. Tämä toiminto näyttää sitten ilmoituksen, jossa on viesti "Hei siellä" ja "Tervetuloa sivulleni" ja menestyskuvake.

Vaihtoehto käytölle swal toimintoa kolmella parametrilla olisi käyttää swal funktio objektiparametrin kanssa. Tämä objektiparametri sisältää ominaisuuksia, jotka määrittävät ilmoituskomponentin.

Esimerkiksi:

tuonti Reagoi alkaen'reagoi'
tuonti swal alkaen'sweetalert'
toimintoSovellus() {
konst ilmoittaa = () => swal(
 {
 otsikko: 'Hei siellä',
 teksti: 'Tervetuloa sivulleni',
 kuvake: 'menestys',
 painike: "okei",
 }
 );
palata (



Napsauta Minä</button>
 </div>
 )
}
viedäoletuksena Sovellus

Yllä olevassa koodilohkossa swal funktio ottaa objektin, jolla on seuraavat ominaisuudet: otsikko, teksti, kuvake, ja -painiketta.

The otsikko ominaisuus määrittää ilmoituksen otsikon, kun taas teksti ominaisuus määrittää viestin. Kanssa kuvake ominaisuutta, voit määrittää ilmoituksessa näkyvän kuvakkeen tyypin.

Lopuksi, -painiketta ominaisuus määrittää ilmoituksessa näkyvän painikkeen tekstin. Tässä tapauksessa painike näyttää tekstin OK.

Painikkeen ominaisuuden mukauttaminen

Voit mukauttaa -painiketta ilmoituskomponentin ominaisuus suunnittelutarpeidesi mukaan. The -painiketta property ottaa objektin, jonka ominaisuuksia käytetään painikkeen toiminnan ja ulkonäön määrittämiseen.

Oletuspainike sisältää seuraavat ominaisuudet:

swal(
 {
 painike: {
 teksti: "OK",
 arvo: totta,
 näkyvissä: totta,
 luokan nimi: "",
 closeModal: totta
 },
 }
 );

Yllä olevassa koodilohkossa painikkeen kanssa käytetään seuraavia ominaisuuksia:

• teksti: Painikkeessa näytettävä teksti.
• arvo: Arvo, joka palautetaan, kun käyttäjä napsauttaa painiketta. Tässä tapauksessa arvo on totta.
• näkyvissä: Boolen arvo ilmaisee, pitäisikö painikkeen olla näkyvissä.
• luokan nimi: Merkkijono, joka edustaa painikkeeseen sovellettavaa CSS-luokkaa.
• closeModal: Boolen arvo, joka osoittaa, tuleeko modaali sulkea, kun painiketta napsautetaan.

Voit myös tehdä useamman kuin yhden painikkeen käyttämällä taulukkoa, jossa on painikkeita omaisuutta. Taulukko ottaa merkkijonoja elementtikseen.

Esimerkiksi:

swal(
 {
 painikkeet: ["Peruuttaa", "okei"],
 }
 );

Tässä esimerkissä ilmoituskomponentti sisältää kaksi painiketta, joissa on teksti peruuttaa ja Ok. Asettamalla painikkeita omaisuutta väärä tekee ilmoituksen ilman painiketta.

HTML-elementtien renderöiminen ilmoituskomponentin sisällä

Voit myös hahmontaa HTML-elementtejä tavallisten merkkijonojen lisäksi ilmoituksena. Tämä tarjoaa laajan valikoiman mukautusvaihtoehtoja.

Esimerkiksi:

tuonti Reagoi alkaen'reagoi'
tuonti swal alkaen'sweetalert'
toimintoSovellus() {
konst ilmoittaa = () => swal(
 {
 sisältö: {
 elementti: "syöttö",
 attribuutit: {
 paikanpitäjä: 'Etunimi',
 tyyppi: 'teksti'
 }
 },
 painikkeet: 'Kirjaudu'
 }
 )
palata (

"sovellus">
Napsauta Minä</button>
 </div>
 )
}
viedäoletuksena Sovellus

Tässä esimerkissä käytät sisältö ominaisuus hahmontaaksesi syöttökentän paikkamerkkitekstillä.

Voit määrittää ilmoituksen sisällön käyttämällä sisältö ominaisuus ja HTML-elementti, joka renderöidään kanssa elementti omaisuutta. Voit määrittää HTML-elementin attribuutit käyttämällä attribuutteja omaisuutta.

Yllä oleva koodilohko näyttää alla olevan ilmoituksen, kun napsautat painikeelementtiä.

Ilmoituskomponentin muotoilu

Sen sijaan, että noudattaisit SweetAlert-kirjaston tarjoamaa oletustyyliä, voit mukauttaa ilmoitusruudun ulkoasua soveltamalla omia CSS-tyylejäsi.

Tulet käyttämään luokan nimi ominaisuutta lisätäksesi tyylisi ilmoitukseen. The luokan nimi ominaisuus määrittää CSS-luokan ilmoitukselle.

Esimerkiksi:

swal(
 {
 otsikko: 'Hei siellä',
 teksti: 'Tervetuloa sivulleni',
 painike: väärä,
 luokan nimi: 'hälytys',
 }
 )

Yllä olevan koodilohkon ilmoituksessa on a luokan nimi arvo hälytys. Kun olet luonut ilmoituksen ja määrittänyt luokan nimi, määrität CSS-tyylisi:

.hälytys{
taustaväri: vihreä;
font-perhe: kursiivinen;
raja-säde: 15px;
}

Yllä olevat CSS-tyylit koskevat renderöintiilmoitusta:

Ilmoitusosan sulkeminen

SweetAlert-kirjasto tarjoaa useita vaihtoehtoja ilmoitusten sulkemistavan mukauttamiseen. Nämä vaihtoehdot ovat closeOnEsc, closeOnClickOutside, ja ajastin ominaisuuksia.

The closeOnEsc ominaisuus määrittää, sulkeutuuko ilmoitusruutu, kun käyttäjä painaa näppäimistön Esc-näppäintä. The closeOnEsc ominaisuus saa loogisen arvon.

swal(
 {
 ...,
 closeOnEsc: väärä,
 }
 )

Oletuksena closeOnEsc ominaisuus on asetettu totta. Yllä olevassa koodilohkossa asetat closeOnEsc omaisuutta väärä. Asettamalla ominaisuuden arvoon väärä, käyttäjä ei voi sulkea ilmoitusruutua painamalla Esc-näppäintä.

Voit myös määrittää, voiko käyttäjä sulkea ilmoitusruudun napsauttamalla ruudun ulkopuolella -painiketta closeOnClickOutside omaisuutta.

Jos ominaisuus on asetettu totta, closeOnClickOutside ominaisuus mahdollistaa ilmoitusruudun sulkemisen napsauttamalla mitä tahansa sen ulkopuolella. Tämä on SweetAlertin oletuskäyttäytyminen. Voit lopettaa tämän toiminnan asettamalla closeOnClickOutside omaisuutta väärä.

swal(
 {
 ...,
 closeOnClickOutside: väärä,
 }
 )

Kanssa ajastin ominaisuutta, voit asettaa aikarajan, jolloin ilmoitusruutu sulkeutuu automaattisesti. The ajastin ominaisuus saa kokonaisluvun millisekunteina.

swal(
 {
 ...,
 ajastin: 5000,
 }
 )

Tässä esimerkissä ajastin ominaisuus on asetettu 5000. Ilmoitus näkyy vain 5 sekuntia.

Tehokkaat mukautetut ilmoitukset SweetAlertilla

SweetAlert on tehokas kirjasto, jonka avulla voit luoda mukautettuja ilmoituksia React-sovelluksessa. Kirjaston käyttäminen swal -toiminnon avulla voit nyt luoda ilmoituksia mukautetuilla ominaisuuksilla ja käyttäytymisellä. Voit myös käyttää muita kirjastoja, kuten React-Toastifya, luodaksesi mukautettuja hälytyksiä React-sovelluksessa.