Hvordan lage en tilpasset varslingskomponent i React

Det er flere tredjepartspakker tilgjengelig i React som kan hjelpe deg med å lage en varslingskomponent. Men hvis du bare vil ha en enkel varslingskomponent, kan det være lurt å lage din egen for å unngå å legge til unødvendige avhengigheter til applikasjonen din.

Sette opp prosjektet

Du vil bruk Vite til å sette opp React-appen. Vite er et byggeverktøy som lar deg raskt stillasere et React-prosjekt.

For å komme i gang, bruk garnpakkebehandlingen til å lage et nytt Vite-prosjekt ved å kjøre kommandoen nedenfor.

garn skape vite

Kommandoen vil be deg om å skrive inn et prosjektnavn. Skriv inn navnet på prosjektet og trykk Enter. Deretter vil den be deg om å velge et rammeverk. Velge reagere og trykk Enter. Til slutt vil den be deg om å velge en variant, velg JavaScript og trykk deretter Enter.

Her er konfigurasjonene denne opplæringen vil bruke:

Etter at Vite har opprettet prosjektet, naviger til prosjektmappen og åpne den ved hjelp av et koderedigeringsprogram.

Du kan deretter starte utviklingsserveren ved å kjøre følgende kommando.

garn dev

Dette vil åpne din nye React-applikasjon i standardnettleseren din på http://localhost: 5173/.

Utforming av varslingskomponenten

For å lage en fleksibel varslingskomponent, må den kunne håndtere ulike typer varslinger med varierende titler, beskrivelser og stiler. Den må for eksempel gi en advarsel, suksess og feilmelding.

Her er forskjellige varianter varslingskomponenten skal kunne gjengi.

Du kan oppnå dette ved å sende rekvisitter til komponenten som spesifiserer typen varsel som skal gjengis, tittelen og beskrivelsesteksten. Ved å bruke disse rekvisittene kan du tilpasse komponenten og gjenbruke den gjennom hele programmet med minimal innsats. Hvis du trenger en oppfriskning av rekvisitter, her er en artikkel som forklarer hvordan du bruker rekvisitter i React.

Opprette varslingskomponenten

I src mappen, opprett en ny fil med navnet Notification.jsx og legg til følgende kode.

eksportmisligholdefunksjonMelding({type, tittel, beskrivelse}) {
komme tilbake (


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

Denne koden lager en funksjonell komponent kalt Melding med tre rekvisitter: type, tittel, og beskrivelse. Du vil bruke disse rekvisittene til å tilpasse varselets stil og innhold.

Fra designet har komponenten et par ikoner, nemlig informasjon, og et kryssikon. Du kan last ned gratis-å-bruke ikoner eller bruk en ikonkomponent fra en pakke som f.eks reaksjonsikoner. Denne opplæringen vil bruke reaksjonsikoner så installer den ved å kjøre kommandoen nedenfor.

garn legge til reaksjonsikoner

Importer deretter ikonene øverst på Melding komponent.

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

Nå kan du endre komponenten slik at den bruker ikonene, tittelen og beskrivelsesverdiene for å lage innholdet i varselet.

eksportmisligholdefunksjonMelding({type, tittel, beskrivelse}) {
komme tilbake (







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

 </div>
 )
}

Det neste trinnet er å style den avhengig av typen som sendes inn.

En tilnærming du kan ta er å definere CSS-klasser for hver type varsling du vil vise. Du kan deretter betinget bruke den aktuelle klassen basert på typen som sendes inn.

For å begynne, lag en ny fil kalt notification.css og importer den inn Notification.jsx ved å legge til følgende kode øverst.

importer "./notification.css"

Så inn notification.css definer basisstilene for varslingskomponenten:

.melding {
vise: bøye seg;
flex-retning: rad;
align-elementer: flex-start;
polstring: 8px;
}
.notification__left {
vise: bøye seg;
flex-retning: rad;
polstring: 0px;
mellomrom: 8px;
marg-høyre: 24px;
}
.notification__content {
vise: bøye seg;
flex-retning: kolonne;
align-elementer: flex-start;
polstring: 0px;
}
.notification__title {
font-familie: "Inter";
fontstil: normal;
font-vekt: 500;
skriftstørrelse: 14px;
}
.notification__description {
font-familie: "Inter";
fontstil: normal;
font-vekt: 400;
skriftstørrelse: 12px;
polstring: 0;
}

Du kan deretter definere stilene for de forskjellige varslingstypene ved å legge til følgende kode i CSS-filen.

.notification__success {
bakgrunn: #f6fef9;
grense: 1pxfast#2f9461;
grense-radius: 8px;
}
.notification__error {
bakgrunn: #fffbfa;
grense: 1pxfast#cd3636;
grense-radius: 8px;
}
.notification__advarsel {
bakgrunn: #fffcf5;
grense: 1pxfast#c8811a;
grense-radius: 8px;
}

Koden ovenfor stiler varslingsbeholderen basert på typen som sendes inn.

For å tilpasse tittelen, bruk følgende stiler.

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

For den egendefinerte beskrivelsesteksten, bruk disse stilene.

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

Og for ikonene, bruk følgende klasser.

.notification_icon_error {
farge: #cd3636;
}
.notification__icon__success {
farge: #2f9461;
}
.notification__icon__warning {
farge: #c8811a;
}

Deretter, i Melding komponent, kan du betinget bruke den aktuelle klassen basert på type prop, slik:

eksportmisligholdefunksjonMelding({type, tittel, beskrivelse}) {
komme tilbake (
`varsling varsel__${type}`}>
`varsel__venstre`}>
`varslingsikon__${type}`}/>
"varsel__innhold">
`notification__title notification__title__${type}`}>{tittel}</div>
`notification__description notification__description__${type}`}>{description}</div>
 </div>
 </div>
`varslingsikon__${type}`}/>
 </div>
 )
}

I denne komponenten setter du dynamisk klassen avhengig av typen som f.eks melding__suksess eller notification__error.

For å se dette i aksjon, importer varslingskomponenten inn App.jsx og bruk den som følger:

import Melding fra'./Melding'
funksjonApp() {
komme tilbake (
 <>
 type="suksess"
 tittel="Oppgave fullført"
 beskrivelse="Oppgaven din er fullført."
 />
 </>
 )
}
eksportmisligholde App

Nå kan du sende en annen type til Melding komponent og gi et passende varsel som samsvarer med meldingen.

Dette er avgjørende for en god brukeropplevelse fordi brukere har kommet til å assosiere forskjellige farger og stiler med forskjellige scenarier, og det er viktig å bruke disse assosiasjonene konsekvent. For eksempel ville det være forvirrende å fortelle en bruker at de har lastet opp et bilde i en rød varslingsboks. De tror kanskje at opplastingen mislyktes, selv om den var vellykket.

Legge til interaktivitet i varslingskomponenten

Du har lært hvordan du kan bruke rekvisitter til å lage en tilpassbar varslingskomponent. For å ta det enda lenger, kan du legge til overganger til denne komponenten for å gjøre den mer engasjerende. Du kan for eksempel bruke CSS-animasjoner til å skyve varslingskomponenten til skjermen og skyve den ut etter at en viss varighet har gått.