Kuidas luua kohandatud teavituskomponenti rakenduses React

Reactis on saadaval mitu kolmanda osapoole paketti, mis aitavad teil luua teavituskomponendi. Kui aga soovite lihtsalt lihtsat teavituskomponenti, võiksite selle luua, et vältida oma rakendusele tarbetute sõltuvuste lisamist.

Projekti seadistamine

Saate seda teha kasutage Vite'i rakenduse React seadistamiseks. Vite on ehitustööriist, mis võimaldab teil Reacti projekti kiiresti tellida.

Alustuseks kasutage uue Vite projekti loomiseks lõngapaketi haldurit, käivitades alloleva käsu.

lõng luua vite

Käsk palub teil sisestada projekti nime. Sisestage projekti nimi ja vajutage sisestusklahvi. Järgmisena palub see teil valida raamistiku. Vali reageerida ja vajutage sisestusklahvi. Lõpuks palub see teil valida variandi, vali JavaScript ja seejärel vajutage sisestusklahvi.

Siin on konfiguratsioonid, mida see õpetus kasutab:

Kui Vite on projekti loonud, liikuge projekti kausta ja avage see koodiredaktoriga.

Seejärel saate käivitada arendusserveri, käivitades järgmise käsu.

lõng dev

See avab teie vaikebrauseris teie uue Reacti rakenduse aadressil http://localhost: 5173/.

Teavituskomponendi kujundamine

Paindliku teavituskomponendi loomiseks peab see suutma käsitleda erinevat tüüpi teatisi, millel on erinevad pealkirjad, kirjeldused ja stiilid. Näiteks peab see esitama hoiatuse, edu ja veateate.

Siin on erinevad variatsioonid, mida teavituskomponent peaks suutma renderdada.

Seda saate saavutada, edastades rekvisiidid komponendile, mis määrab renderdatava teatise tüübi, pealkirja ja kirjelduse teksti. Neid rekvisiite kasutades saate komponenti kohandada ja seda kogu rakenduses minimaalse pingutusega uuesti kasutada. Kui vajate rekvisiitide kohta värskendust, on siin artikkel, mis selgitab kuidas Reactis rekvisiite kasutada.

Teavituskomponendi loomine

Aastal src kausta, looge uus fail nimega Notification.jsx ja lisage järgmine kood.

eksportidavaikimisifunktsiooniTeavitus({tüüp, pealkiri, kirjeldus}) {
tagasi (


 {/* Teavituse sisu */}
 </div>
 )
}

See kood loob funktsionaalse komponendi nimega Teavitus kolme rekvisiidiga: tüüp, pealkirija kirjeldus. Kasutate neid rekvisiite teatise stiili ja sisu kohandamiseks.

Disainis on komponendil paar ikooni, nimelt teave ja ristiikoon. Sa saad laadige alla tasuta kasutatavad ikoonid või kasutage ikoonikomponenti paketist, näiteks reageerimise ikoonid. See õpetus kasutab reageerimise ikoonid nii et installige see, käivitades alloleva käsu.

lõng lisa reaktsiooniikoonid

Seejärel importige ikoonid ülaosas Teavitus komponent.

importida { RxCross2, RxInfoCircled } alates"react-icons/rx"

Nüüd saate komponenti muuta, et kasutada teatise sisu loomiseks ikoone, pealkirja ja kirjelduse väärtusi.

eksportidavaikimisifunktsiooniTeavitus({tüüp, pealkiri, kirjeldus}) {
tagasi (







{title}</div>
{kirjeldus}</div>
 </div>
 </div>

 </div>
 )
}

Järgmine samm on selle kujundamine sõltuvalt sisestatud tüübist.

Üks võimalus, mida saate kasutada, on määrata CSS-i klassid iga kuvatava teatise tüübi jaoks. Seejärel saate tinglikult rakendada sobivat klassi, mis põhineb edasiantud tüübil.

Alustuseks looge uus fail nimega teatis.css ja importige see sisse Notification.jsx lisades ülaossa järgmise koodi.

import "./notification.css"

Siis sisse teatis.css määrake teavituskomponendi põhistiilid:

.teade {
kuva: painduv;
painduv suund: rida;
joondada-üksused: flex-start;
polsterdus: 8px;
}
.teavitus__left {
kuva: painduv;
painduv suund: rida;
polsterdus: 0px;
lõhe: 8px;
margin-parem: 24px;
}
.notification__content {
kuva: painduv;
painduv suund: veerg;
joondada-üksused: flex-start;
polsterdus: 0px;
}
.notification__title {
font-perekond: "Inter";
fondi stiilis: normaalne;
font-weight: 500;
fondi suurus: 14px;
}
.notification__description {
font-perekond: "Inter";
fondi stiilis: normaalne;
font-weight: 400;
fondi suurus: 12px;
polsterdus: 0;
}

Seejärel saate määrata erinevate teavitustüüpide stiilid, lisades CSS-faili järgmise koodi.

.teavitus__edu {
taustal: #f6fef9;
piir: 1pxtahke#2f9461;
piiriraadius: 8px;
}
.notification__error {
taustal: #fffbfa;
piir: 1pxtahke# cd3636;
piiriraadius: 8px;
}
.notification__warning {
taustal: #fffcf5;
piir: 1pxtahke#c8811a;
piiriraadius: 8px;
}

Ülaltoodud kood kujundab teavitusmahuti stiili sisestatud tüübi alusel.

Pealkirja kohandamiseks kasutage järgmisi stiile.

.notification__title__success {
värvi: #2f9461;
}
.notification__title__warning {
värvi: #c8811a;
}
.notification__title__error {
värvi: # cd3636;
}

Kohandatud kirjeldusteksti jaoks kasutage neid stiile.

.notification__description__success {
värvi: #53b483;
}
.notification__description__warning {
värvi: #e9a23b;
}
.notification__description__error {
värvi: #f34141;
}

Ja ikoonide jaoks kasutage järgmisi klasse.

.notification_icon_error {
värvi: # cd3636;
}
.notification__icon__success {
värvi: #2f9461;
}
.notification__icon__warning {
värvi: #c8811a;
}

Seejärel, Teavitus komponent, saate tinglikult rakendada sobivat klassi, mis põhineb tüüp rekvisiit, selline:

eksportidavaikimisifunktsiooniTeavitus({tüüp, pealkiri, kirjeldus}) {
tagasi (
`teavitusteade__${type}`}>
`märguanne__left`}>
` notification__icon__${type}`}/>
"teatis__sisu">
`märguanne__title teatis__title__${type}`}>{title}</div>
`märguanne__kirjelduse teatis__kirjeldus__${type}`}>{kirjeldus}</div>
 </div>
 </div>
` notification__icon__${type}`}/>
 </div>
 )
}

Selles komponendis määrate klassi dünaamiliselt sõltuvalt tüübist, näiteks teatis__edu või teatise__viga.

Selle toimimise nägemiseks importige teavituskomponent App.jsx ja kasutage seda järgmiselt:

importida Teavitus alates"./Teade"
funktsiooniRakendus() {
tagasi (
 <>
 tüüp="edu"
 pealkiri="Ülesanne lõpetatud"
 kirjeldus="Teie ülesanne on edukalt täidetud."
 />
 </>
 )
}
eksportidavaikimisi Rakendus

Nüüd saate edastada erinevat tüüpi Teavitus komponendi ja esitama vastava teate, mis vastab sõnumile.

See on hea kasutajakogemuse jaoks hädavajalik, sest kasutajad on hakanud seostama erinevaid värve ja stiile erinevate stsenaariumidega ning oluline on neid seoseid järjepidevalt kasutada. Näiteks oleks segadust tekitav anda kasutajale teada, et ta on foto edukalt üles laadinud punases teavituskastis. Nad võivad arvata, et üleslaadimine ebaõnnestus, isegi kui see õnnestus.

Interaktiivsuse lisamine teavituskomponendile

Olete õppinud, kuidas saate rekvisiite kasutada kohandatava teavituskomponendi loomiseks. Veelgi kaugemale minemiseks võite lisada sellele komponendile üleminekuid, et muuta see köitvamaks. Näiteks saate CSS-animatsioonide abil libistada teavituskomponendi ekraanile ja pärast teatud aja möödumist välja libistada.