Nu trebuie să vă bazați pe un pachet terță parte pentru a crea o componentă de notificare. Iată cum îl puteți construi singur.
Există mai multe pachete terțe disponibile în React care vă pot ajuta să creați o componentă de notificare. Cu toate acestea, dacă doriți doar o componentă simplă de notificare, este posibil să doriți să o creați propria pentru a evita adăugarea de dependențe inutile la aplicația dvs.
Configurarea Proiectului
Veți utilizați Vite pentru a configura aplicația React. Vite este un instrument de construcție care vă permite să montați rapid un proiect React.
Pentru a începe, utilizați managerul de pachete de fire pentru a crea un nou proiect Vite, rulând comanda de mai jos.
yarn create vite
Comanda vă va solicita să introduceți un nume de proiect. Introduceți numele proiectului și apăsați Enter. Apoi, vă va solicita să selectați un cadru. Alege reacţiona și apăsați Enter. În cele din urmă, vă va cere să selectați o variantă, alegeți JavaScript și apoi apăsați Enter.
Iată configurațiile pe care le va folosi acest tutorial:
După ce Vite creează proiectul, navigați la folderul proiectului și deschideți-l folosind un editor de cod.
Apoi puteți porni serverul de dezvoltare rulând următoarea comandă.
fire dev
Aceasta va deschide noua aplicație React în browserul implicit la http://localhost: 5173/.
Proiectarea componentei de notificare
Pentru a crea o componentă flexibilă de notificare, aceasta trebuie să poată gestiona diferite tipuri de notificări cu diferite titluri, descrieri și stiluri. De exemplu, trebuie să emită o notificare de avertizare, succes și eroare.
Iată diferite variante pe care componenta de notificare ar trebui să le poată reda.
Puteți realiza acest lucru prin transmiterea elementelor de recuzită la componenta care specifică tipul de notificare de redat, titlul și textul de descriere. Folosind aceste elemente de recuzită, puteți personaliza componenta și o puteți reutiliza în întreaga aplicație cu efort minim. Dacă aveți nevoie de o reîmprospătare despre recuzită, iată un articol care explică cum să folosiți recuzita în React.
Crearea componentei de notificare
În src folder, creați un fișier nou numit Notification.jsx și adăugați următorul cod.
exportMod implicitfuncţieNotificare({tip, titlu, descriere}) {
întoarcere (
{/* Conținutul notificării */}
</div>
)
}
Acest cod creează o componentă funcțională numită Notificare cu trei recuzite: tip, titlu, și Descriere. Veți folosi aceste elemente de recuzită pentru a personaliza stilul și conținutul notificării.
Din design, componenta are câteva pictograme, și anume informații și o pictogramă în cruce. Puteți descărcați pictograme gratuite sau utilizați o componentă pictogramă dintr-un pachet, cum ar fi pictograme de reacție. Acest tutorial va folosi pictograme de reacție așa că instalează-l rulând comanda de mai jos.
fire adăugați pictograme de reacție
Apoi importați pictogramele din partea de sus a Notificare componentă.
import { RxCross2, RxInfoCircled } din„pictograme de reacție/rx”
Acum, puteți modifica componenta pentru a utiliza pictogramele, titlul și valorile de descriere pentru a crea conținutul notificării.
exportMod implicitfuncţieNotificare({tip, titlu, descriere}) {
întoarcere (
{titlu}</div>
{descriere}</div>
</div>
</div>
</div>
)
}
Următorul pas este să-l stilizezi în funcție de tipul transmis.
O abordare pe care o puteți lua este să definiți clase CSS pentru fiecare tip de notificare pe care doriți să o afișați. Apoi, puteți aplica condiționat clasa corespunzătoare în funcție de tipul care este transmis.
Pentru a începe, creați un fișier nou numit notificare.css și importați-l în Notification.jsx adăugând următorul cod în partea de sus.
import „./notification.css”
Apoi în notificare.css definiți stilurile de bază pentru componenta de notificare:
.notificare {
afişa: contracta;
flex-direcție: rând;
alinierea elementelor: flex-start;
umplutura: 8px;
}
.notificare__stânga {
afişa: contracta;
flex-direcție: rând;
umplutura: 0px;
decalaj: 8px;
margine-dreapta: 24px;
}
.conținut__notificare {
afişa: contracta;
flex-direcție: coloană;
alinierea elementelor: flex-start;
umplutura: 0px;
}
.notificare__titlu {
familie de fonturi: "Inter";
stilul fontului: normal;
grosimea fontului: 500;
marimea fontului: 14px;
}
.notificare__descriere {
familie de fonturi: "Inter";
stilul fontului: normal;
grosimea fontului: 400;
marimea fontului: 12px;
umplutura: 0;
}
Puteți defini apoi stilurile pentru diferitele tipuri de notificare adăugând următorul cod în fișierul CSS.
.notificare__succes {
fundal: #f6fef9;
frontieră: 1pxsolid#2f9461;
hotar-raza: 8px;
}
.notificare__eroare {
fundal: #ffffbfa;
frontieră: 1pxsolid#cd3636;
hotar-raza: 8px;
}
.notificare__avertizare {
fundal: #fffcf5;
frontieră: 1pxsolid#c8811a;
hotar-raza: 8px;
}
Codul de mai sus stilează containerul de notificare în funcție de tipul transmis.
Pentru a personaliza titlul, utilizați următoarele stiluri.
.notificare__titlu__succes {
culoare: #2f9461;
}
.notification__title__warning {
culoare: #c8811a;
}
.notification__title__error {
culoare: #cd3636;
}
Pentru textul de descriere personalizat, utilizați aceste stiluri.
.notificare__descriere__succes {
culoare: #53b483;
}
.notificare__descriere__avertizare {
culoare: #e9a23b;
}
.notification__description__error {
culoare: #f34141;
}
Și pentru pictograme, folosiți următoarele clase.
.notification_icon_error {
culoare: #cd3636;
}
.notificare__icon__succes {
culoare: #2f9461;
}
.notificare__icoană__avertizare {
culoare: #c8811a;
}
Apoi, în Notificare componentă, puteți aplica condiționat clasa corespunzătoare pe baza tip prop, cam asa:
exportMod implicitfuncţieNotificare({tip, titlu, descriere}) {
întoarcere (
`notificare de notificare__${type}`}>
`notificare__stânga`}>
`notificare__icoana__${type}`}/>
„conținut__notificare”>
`notificare__title notificare__title__${type}`}>{titlu}</div>
`notificare__descriere notificare__descriere__${type}`}>{descriere}</div>
</div>
</div>
`notificare__icoana__${type}`}/>
</div>
)
}
În această componentă, setați în mod dinamic clasa în funcție de tip, cum ar fi notificare__succes sau notificare__eroare.
Pentru a vedea acest lucru în acțiune, importați componenta Notificare în App.jsx și folosește-l după cum urmează:
import Notificare din'./Notificare'funcţieApp() {
întoarcere (
<>
tip="succes"
titlu=„Sarcina finalizată”
descriere=„Sarcina dumneavoastră a fost finalizată cu succes”.
/>
</>
)
}
exportMod implicit App
Acum, puteți trece un alt tip la Notificare componentă și redă o notificare adecvată care se potrivește cu mesajul.
Acest lucru este esențial pentru o experiență bună a utilizatorului, deoarece utilizatorii au ajuns să asocieze diferite culori și stiluri cu diferite scenarii și este important să folosiți aceste asocieri în mod constant. De exemplu, ar fi confuz să anunți un utilizator că a încărcat cu succes o fotografie într-o casetă roșie de notificare. Ar putea crede că încărcarea a eșuat, chiar dacă a avut succes.
Adăugarea de interactivitate la Componenta de notificare
Ați învățat cum puteți utiliza elementele de recuzită pentru a crea o componentă de notificare personalizabilă. Pentru a duce și mai departe, puteți adăuga tranziții la această componentă pentru a o face mai captivantă. De exemplu, puteți folosi animații CSS pentru a glisa componenta de notificare pe ecran și pentru a o glisa afară după ce a trecut o anumită durată.