Uneori doriți ca aplicațiile dvs. web să afișeze un fel de notificare pentru a indica dacă un eveniment a avut succes sau nu. Eu personal îl folosesc pentru a afișa un mesaj dacă a apărut o eroare în timpul unui apel pe server. Este întotdeauna bine să arătați feedback utilizatorului dacă s-a întâmplat ceva neașteptat.

În acest tutorial vom realiza și proiecta o componentă de snackbar complet personalizată și reutilizabilă, fără a utiliza resurse externe

Vom proceda după cum urmează:
1. Crearea unei aplicații reacții noi.
2. Crearea și proiectarea componentei noastre Snackbar.
3. Un buton pentru a declanșa un eveniment pentru a afișa Snackbar.

Crearea unei aplicații reacții noi

Să creăm un nou proiect react după nume snackbar folosind următoarea comandă,

npx create-react-app snackbar

Să începem aplicația creată folosind npm start și să deschidem browserul și să accesăm http://localhost:3000. Veți vedea aplicația implicită a react.

Acum haideți să ne murdărăm mâinile prin crearea componentei noastre de snackbar.

Crearea și proiectarea componentei noastre Snackbar

Deschideți proiectul snackbar nou creat în oricare dintre IDE-urile dvs. preferate. În cazul meu, este codul de studio vizual.
În interiorul proiectului, accesați folderul src și creați două fișiere snackbar.js și snackbar.module.css în interiorul acestuia.

Mai întâi să scriem rapid css pentru snackbar în snackbar.module.css. module.css se referă la modulul css, ceea ce înseamnă că toate clasele și animațiile css sunt acoperite local. Puteți afla mai multe despre el de la https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet.

Revenind la proiectarea părții, mai jos este fragmentul de cod pentru aceasta.

  • .snackbar este clasa CSS principală pentru Snackbar, care este inițial ascunsă.
  • Clasa .snackbar.show face Snackbar vizibil cu efect de fade in and fade out.

Acum să creăm componenta snackbar.
Mai jos este fragmentul de cod pentru aceasta.

Această componentă are trei părți principale

  • isActive: o stare care controlează vizibilitatea Snackbars. Dacă este adevărat, atunci componenta are clasa css .snackbar.show care o face vizibilă cu efect de fade in și fade out, iar când isActive este fals, atunci componenta are .snackbar css class care face componenta invizibilă sau ascunsă.
  • openSnackbar: este funcția care controlează starea isActive. Când această funcție este executată, isActive devine adevărată, făcând astfel vizibilă Snackbar cu un interval de timp de 3 secunde, după care isActive devine fals. Funcția openSnackbar setează, de asemenea, mesajul să fie afișat în Snackbar.
  • mesaj: este mesajul care urmează să fie afișat în snackbar

S-ar putea să vă întrebați de ce mesajul nu este o stare. Răspunsul este simplu, deoarece nu dorim ca componenta noastră Snackbar să fie redată din nou la modificarea mesajului, ci la schimbarea isActive.

Deci, acum puteți vedea clar de sus că trebuie doar să executați openSnackbar pentru a avea Snackbar sau notificarea pop-up în aplicația dvs. React.

Acum, pentru o demonstrație simplă, să facem un buton pentru a executa asta.

Un buton pentru a declanșa un eveniment pentru a afișa Snackbar

Pentru a simplifica, am adăugat butonul în fișierul App.js ca mai jos,

După cum puteți vedea, am importat componenta Snackbar și am plasat oriunde în retur. Deci următorul nostru obiectiv este să executăm funcția openSnackbar a componentei Snackbar. Pentru aceasta vom folosi refs. Vom crea un ref folosind snackbarRef = React.createRef() și vom trece snackbarRef creat la ref Snackbar ca <Snackbar ref = {this.snackbarRef} />
Puteți vedea că am creat un buton simplu și am executat openSnackbar la clic pe acesta. Puteți adăuga propriul mesaj sau mesaj de eroare sau orice doriți. În acest caz, va arăta ca mai jos la clic pe buton,

asta ai facut-o. Este la fel de simplu. Acum puteți utiliza această componentă oriunde în proiect. O caracteristică foarte simplă, dar foarte puternică.

Acesta este linkul către depozitul github Snackbar https://github.com/Kroniac/react_snackbar

Spuneți-mi dacă acest tutorial v-a fost util și pentru care caz l-ați folosit.