Sådan opretter du en brugerdefineret notifikationskomponent i React

Der er flere tredjepartspakker tilgængelige i React, som kan hjælpe dig med at oprette en notifikationskomponent. Men hvis du bare vil have en simpel notifikationskomponent, kan du lave din egen for at undgå at tilføje unødvendige afhængigheder til din applikation.

Opsætning af projektet

Du vil brug Vite til at konfigurere React-appen. Vite er et byggeværktøj, der lader dig hurtigt stilladsere et React-projekt.

For at komme i gang skal du bruge garnpakkemanageren til at oprette et nyt Vite-projekt ved at køre kommandoen nedenfor.

garn skabe vite

Kommandoen vil bede dig om at indtaste et projektnavn. Indtast navnet på projektet, og tryk på Enter. Dernæst vil det bede dig om at vælge en ramme. Vælge reagere og tryk på Enter. Til sidst vil den bede dig om at vælge en variant, vælg JavaScript og tryk derefter på Enter.

Her er de konfigurationer, som denne øvelse vil bruge:

Når Vite har oprettet projektet, skal du navigere til projektmappen og åbne den ved hjælp af en kodeeditor.

Du kan derefter starte udviklingsserveren ved at køre følgende kommando.

garn dev

Dette åbner din nye React-applikation i din standardbrowser på http://localhost: 5173/.

Design af meddelelseskomponenten

For at skabe en fleksibel notifikationskomponent skal den kunne håndtere forskellige typer af notifikationer med varierende titler, beskrivelser og stilarter. For eksempel skal den afgive en advarsel, succes og fejlmeddelelse.

Her er forskellige variationer, som meddelelseskomponenten skal kunne gengive.

Du kan opnå dette ved at sende rekvisitter til den komponent, der specificerer typen af ​​meddelelse, der skal gengives, titlen og beskrivelsesteksten. Ved at bruge disse rekvisitter kan du tilpasse komponenten og genbruge den i hele din applikation med minimal indsats. Hvis du har brug for en genopfriskning af rekvisitter, er her en artikel, der forklarer hvordan man bruger rekvisitter i React.

Oprettelse af meddelelseskomponenten

I src mappe, skal du oprette en ny fil med navnet Notification.jsx og tilføje følgende kode.

eksportStandardfungereNotifikation({type, titel, beskrivelse}) {
Vend tilbage (


 {/* Meddelelsesindhold */}
 </div>
 )
}

Denne kode opretter en funktionel komponent kaldet Notifikation med tre rekvisitter: type, titel, og beskrivelse. Du skal bruge disse rekvisitter til at tilpasse underretningens stil og indhold.

Fra designet har komponenten et par ikoner, nemlig information og et krydsikon. Du kan download gratis at bruge ikoner eller brug en ikonkomponent fra en pakke som f.eks reaktions-ikoner. Denne tutorial vil bruge reaktions-ikoner så installer det ved at køre kommandoen nedenfor.

garn tilføje react-ikoner

Importer derefter ikonerne øverst i Notifikation komponent.

importere { RxCross2, RxInfoCircled } fra"react-ikoner/rx"

Nu kan du ændre komponenten til at bruge ikonerne, titlen og beskrivelsespropværdierne til at oprette indholdet af meddelelsen.

eksportStandardfungereNotifikation({type, titel, beskrivelse}) {
Vend tilbage (







{title}</div>
{beskrivelse}</div>
 </div>
 </div>

 </div>
 )
}

Det næste trin er at style det afhængigt af typen, der er sendt ind.

En tilgang, du kan tage, er at definere CSS-klasser for hver type notifikation, du vil vise. Du kan derefter betinget anvende den relevante klasse baseret på den type, der sendes ind.

For at begynde skal du oprette en ny fil kaldet notification.css og importer det ind Notification.jsx ved at tilføje følgende kode øverst.

importer "./notification.css"

Så ind notification.css definer basisstilene for meddelelseskomponenten:

.notifikation {
Skærm: bøje;
flex-retning: række;
align-elementer: flex-start;
polstring: 8px;
}
.notification__venstre {
Skærm: bøje;
flex-retning: række;
polstring: 0px;
hul: 8px;
margin-højre: 24px;
}
.notification__content {
Skærm: bøje;
flex-retning: kolonne;
align-elementer: flex-start;
polstring: 0px;
}
.notification__title {
skrifttype-familie: "Inter";
skrifttype: normal;
skrifttype-vægt: 500;
skriftstørrelse: 14px;
}
.notification__description {
skrifttype-familie: "Inter";
skrifttype: normal;
skrifttype-vægt: 400;
skriftstørrelse: 12px;
polstring: 0;
}

Du kan derefter definere stilene for de forskellige meddelelsestyper ved at tilføje følgende kode i CSS-filen.

.notifikation__succes {
baggrund: #f6fef9;
grænse: 1pxsolid#2f9461;
grænse-radius: 8px;
}
.notification__error {
baggrund: #fffbfa;
grænse: 1pxsolid#cd3636;
grænse-radius: 8px;
}
.notification__advarsel {
baggrund: #fffcf5;
grænse: 1pxsolid#c8811a;
grænse-radius: 8px;
}

Ovenstående kode stiler meddelelsesbeholderen baseret på den type, der er sendt ind.

Brug følgende stilarter for at tilpasse titlen.

.notification__title__success {
farve: #2f9461;
}
.notification__title__advarsel {
farve: #c8811a;
}
.notification__title__error {
farve: #cd3636;
}

Brug disse stilarter til den tilpassede beskrivelsestekst.

.notification__description__success {
farve: #53b483;
}
.notification__description__advarsel {
farve: #e9a23b;
}
.notification__description__error {
farve: #f34141;
}

Og til ikonerne skal du bruge følgende klasser.

.notification_icon_error {
farve: #cd3636;
}
.notification__icon__succes {
farve: #2f9461;
}
.notification__icon__advarsel {
farve: #c8811a;
}

Derefter i Notifikation komponent, kan du betinget anvende den relevante klasse baseret på type prop, sådan her:

eksportStandardfungereNotifikation({type, titel, beskrivelse}) {
Vend tilbage (
`meddelelsesmeddelelse__${type}`}>
`meddelelse__venstre`}>
`meddelelsesikon__${type}`}/>
"meddelelsesindhold">
`notification__title notification__title__${type}`}>{title}</div>
`notification__description notification__description__${type}`}>{beskrivelse}</div>
 </div>
 </div>
`meddelelsesikon__${type}`}/>
 </div>
 )
}

I denne komponent indstiller du dynamisk klassen afhængigt af typen som f.eks notifikation__succes eller notification__error.

For at se dette i aktion skal du importere meddelelseskomponenten i App.jsx og brug det som følger:

importere Notifikation fra'./Notifikation'
fungereApp() {
Vend tilbage (
 <>
 type="succes"
 titel="Opgave fuldført"
 beskrivelse="Din opgave er blevet fuldført med succes."
 />
 </>
 )
}
eksportStandard App

Nu kan du videregive en anden type til Notifikation komponent og afgiv en passende meddelelse, der matcher meddelelsen.

Dette er vigtigt for en god brugeroplevelse, fordi brugere er kommet til at forbinde forskellige farver og stilarter med forskellige scenarier, og det er vigtigt at bruge disse associationer konsekvent. For eksempel ville det være forvirrende at lade en bruger vide, at de har uploadet et billede i en rød notifikationsboks. De tror måske, at uploaden mislykkedes, selvom den lykkedes.

Tilføjelse af interaktivitet til meddelelseskomponenten

Du har lært, hvordan du kan bruge rekvisitter til at oprette en brugerdefinerbar notifikationskomponent. For at tage det endnu længere, kan du tilføje overgange til denne komponent for at gøre den mere engagerende. For eksempel kan du bruge CSS-animationer til at skubbe notifikationskomponenten til skærmen og skubbe den ud efter en vis varighed er gået.