Kako stvoriti prilagođenu komponentu obavijesti u Reactu

U Reactu je dostupno nekoliko paketa trećih strana koji vam mogu pomoći u stvaranju komponente obavijesti. Međutim, ako želite samo jednostavnu komponentu obavijesti, možda ćete htjeti izraditi vlastitu kako biste izbjegli dodavanje nepotrebnih ovisnosti svojoj aplikaciji.

Postavljanje projekta

Hoćeš koristite Vite za postavljanje aplikacije React. Vite je alat za izradu koji vam omogućuje da brzo izradite React projekt.

Za početak upotrijebite upravitelj paketa pređe za stvaranje novog Vite projekta pokretanjem donje naredbe.

pređa stvoriti vite

Naredba će od vas tražiti da unesete naziv projekta. Unesite naziv projekta i pritisnite Enter. Zatim će vas zatražiti da odaberete okvir. Odaberite reagirati i pritisnite Enter. Na kraju će vas pitati da odaberete varijantu, odaberite JavaScript a zatim pritisnite Enter.

Ovo su konfiguracije koje će ovaj vodič koristiti:

Nakon što Vite izradi projekt, dođite do mape projekta i otvorite je pomoću uređivača koda.

Zatim možete pokrenuti razvojni poslužitelj izvođenjem sljedeće naredbe.

pređa dev

Ovo će otvoriti vašu novu React aplikaciju u vašem zadanom pregledniku na adresi http://localhost: 5173/.

Dizajniranje komponente obavijesti

Kako bi se stvorila fleksibilna komponenta obavijesti, ona mora moći rukovati različitim vrstama obavijesti s različitim naslovima, opisima i stilovima. Na primjer, treba prikazati upozorenje, uspjeh i obavijest o pogrešci.

Ovdje su različite varijacije koje bi komponenta obavijesti trebala moći prikazati.

To možete postići prosljeđivanjem rekvizita komponenti koja navodi vrstu obavijesti za prikaz, naslov i tekst opisa. Korištenjem ovih rekvizita možete prilagoditi komponentu i ponovno je koristiti u svojoj aplikaciji uz minimalan napor. Ako trebate osvježenje o rekvizitima, evo članka koji objašnjava kako koristiti rekvizite u Reactu.

Stvaranje komponente obavijesti

u src mapu, stvorite novu datoteku pod nazivom Obavijest.jsx i dodajte sljedeći kod.

izvozzadanofunkcijaObavijest({vrsta, naslov, opis}) {
povratak (


 {/* Sadržaj obavijesti */}
 </div>
 )
}

Ovaj kod stvara funkcionalnu komponentu tzv Obavijest sa tri rekvizita: tip, titula, i opis. Koristit ćete ove rekvizite za prilagodbu stila i sadržaja obavijesti.

Što se tiče dizajna, komponenta ima nekoliko ikona, odnosno informacije i ikonu križa. Možeš preuzmite besplatne ikone ili koristiti komponentu ikone iz paketa kao što je reagirati ikone. Ovaj vodič će koristiti reagirati ikone pa ga instalirajte pokretanjem donje naredbe.

yarn dodajte ikone reakcije

Zatim uvezite ikone na vrhu Obavijest komponenta.

uvoz { RxCross2, RxInfoCircled } iz"react-icons/rx"

Sada možete izmijeniti komponentu da koristi ikone, naslov i vrijednosti opisa opisa za stvaranje sadržaja obavijesti.

izvozzadanofunkcijaObavijest({vrsta, naslov, opis}) {
povratak (







{title}</div>
{opis}</div>
 </div>
 </div>

 </div>
 )
}

Sljedeći korak je stilizirati ga ovisno o prenesenom tipu.

Jedan pristup koji možete poduzeti jest definiranje CSS klasa za svaku vrstu obavijesti koju želite prikazati. Zatim možete uvjetno primijeniti odgovarajuću klasu na temelju tipa koji je proslijeđen.

Za početak kreirajte novu datoteku pod nazivom obavijest.css i uvesti ga Obavijest.jsx dodavanjem sljedećeg koda na vrh.

uvoz "./notification.css"

Zatim unutra obavijest.css definirajte osnovne stilove za komponentu obavijesti:

.obavijest {
prikaz: savijati;
flex-direction: red;
align-items: flex-start;
podstava: 8px;
}
.obavijest__lijevo {
prikaz: savijati;
flex-direction: red;
podstava: 0px;
praznina: 8px;
margin-desno: 24px;
}
.sadržaj__obavijesti {
prikaz: savijati;
flex-direction: stupac;
align-items: flex-start;
podstava: 0px;
}
.obavijest__naslov {
obitelj-fontova: "Između";
stil fonta: normalan;
težina fonta: 500;
veličina fonta: 14px;
}
.obavijest__opis {
obitelj-fontova: "Između";
stil fonta: normalan;
težina fonta: 400;
veličina fonta: 12px;
podstava: 0;
}

Zatim možete definirati stilove za različite vrste obavijesti dodavanjem sljedećeg koda u CSS datoteku.

.obavijest__uspjeh {
pozadina: #f6fef9;
granica: 1pxčvrsta#2f9461;
granični radijus: 8px;
}
.obavijest__pogreška {
pozadina: #fffbfa;
granica: 1pxčvrsta#cd3636;
granični radijus: 8px;
}
.obavijest__upozorenje {
pozadina: #fffcf5;
granica: 1pxčvrsta#c8811a;
granični radijus: 8px;
}

Gornji kod stilizira spremnik obavijesti na temelju proslijeđene vrste.

Da biste prilagodili naslov, koristite sljedeće stilove.

.obavijest__naslov__uspjeh {
boja: #2f9461;
}
.obavijest__naslov__upozorenje {
boja: #c8811a;
}
.obavijest__naslov__pogreška {
boja: #cd3636;
}

Za prilagođeni tekst opisa koristite ove stilove.

.obavijest__opis__uspjeh {
boja: #53b483;
}
.obavijest__opis__upozorenje {
boja: #e9a23b;
}
.obavijest__opis__pogreška {
boja: #f34141;
}

A za ikone koristite sljedeće klase.

.notification_icon_error {
boja: #cd3636;
}
.ikona__obavijest__uspjeh {
boja: #2f9461;
}
.obavijest__ikona__upozorenje {
boja: #c8811a;
}

Zatim, u Obavijest komponentu, možete uvjetno primijeniti odgovarajuću klasu na temelju tip podupirač, ovako:

izvozzadanofunkcijaObavijest({vrsta, naslov, opis}) {
povratak (
`obavijest obavijest__${type}`}>
`obavijest__lijevo`}>
`ikona__obavijest__${type}`}/>
"sadržaj__obavijesti">
`obavijest__naslov obavijest__naslov__${type}`}>{naslov}</div>
`obavijest__opis obavijest__opis__${type}`}>{opis}</div>
 </div>
 </div>
`ikona__obavijest__${type}`}/>
 </div>
 )
}

U ovoj komponenti dinamički postavljate klasu ovisno o vrsti kao što je obavijest__uspjeh ili obavijest__greška.

Da biste vidjeli ovo na djelu, uvezite komponentu obavijesti App.jsx i koristite ga na sljedeći način:

uvoz Obavijest iz'./Obavijest'
funkcijaaplikacija() {
povratak (
 <>
 vrsta="uspjeh"
 naslov="Zadatak završen"
 opis="Vaš zadatak je uspješno obavljen."
 />
 </>
 )
}
izvozzadano aplikacija

Sada možete proslijediti drugu vrstu u Obavijest komponentu i prikazati odgovarajuću obavijest koja odgovara poruci.

To je bitno za dobro korisničko iskustvo jer su korisnici počeli povezivati ​​različite boje i stilove s različitim scenarijima i važno je dosljedno koristiti te asocijacije. Na primjer, bilo bi zbunjujuće obavijestiti korisnika da je uspješno učitao fotografiju u crvenom okviru za obavijesti. Mogli bi pomisliti da prijenos nije uspio, čak i ako je bio uspješan.

Dodavanje interaktivnosti komponenti obavijesti

Naučili ste kako možete koristiti rekvizite za izradu prilagodljive komponente obavijesti. Da biste pošli dalje, ovoj komponenti možete dodati prijelaze kako biste je učinili privlačnijom. Na primjer, možete upotrijebiti CSS animacije da pomaknete komponentu obavijesti na zaslon i pomaknete je van nakon određenog vremena.