Du behöver inte förlita dig på ett tredjepartspaket för att skapa en aviseringskomponent. Så här kan du bygga den på egen hand.
Det finns flera tredjepartspaket tillgängliga i React som kan hjälpa dig att skapa en aviseringskomponent. Men om du bara vill ha en enkel aviseringskomponent kanske du vill skapa din egen för att undvika att lägga till onödiga beroenden till din applikation.
Konfigurera projektet
Du kommer använd Vite för att konfigurera React-appen. Vite är ett byggverktyg som låter dig snabbt bygga ett React-projekt.
För att komma igång använder du garnpakethanteraren för att skapa ett nytt Vite-projekt genom att köra kommandot nedan.
garn skapa vite
Kommandot kommer att uppmana dig att ange ett projektnamn. Ange namnet på projektet och tryck på Enter. Därefter kommer det att uppmana dig att välja ett ramverk. Välja reagera och tryck på Enter. Slutligen kommer den att be dig välja en variant, välj JavaScript och tryck sedan på Enter.
Här är konfigurationerna som denna handledning kommer att använda:
När Vite har skapat projektet, navigera till projektmappen och öppna den med en kodredigerare.
Du kan sedan starta utvecklingsservern genom att köra följande kommando.
garn dev
Detta öppnar din nya React-applikation i din standardwebbläsare på http://localhost: 5173/.
Designa aviseringskomponenten
För att skapa en flexibel aviseringskomponent behöver den kunna hantera olika typer av aviseringar med varierande titlar, beskrivningar och stilar. Till exempel måste den ge en varning, framgång och felmeddelande.
Här är olika varianter som aviseringskomponenten ska kunna återge.
Du kan uppnå detta genom att skicka rekvisita till komponenten som anger typen av meddelande som ska återges, titeln och beskrivningstexten. Genom att använda dessa rekvisita kan du anpassa komponenten och återanvända den i hela din applikation med minimal ansträngning. Om du behöver en uppfräschning om rekvisita, här är en artikel som förklarar hur man använder rekvisita i React.
Skapa meddelandekomponenten
I den src mapp skapar du en ny fil med namnet Notification.jsx och lägg till följande kod.
exporterastandardfungeraUnderrättelse({typ, titel, beskrivning}) {
lämna tillbaka (
{/* Aviseringsinnehåll */}
</div>
)
}
Denna kod skapar en funktionell komponent som kallas Underrättelse med tre rekvisita: typ, titel, och beskrivning. Du kommer att använda dessa rekvisita för att anpassa meddelandets stil och innehåll.
Från designen har komponenten ett par ikoner, nämligen information, och en korsikon. Du kan ladda ner gratis att använda ikoner eller använd en ikonkomponent från ett paket som t.ex reaktionsikoner. Denna handledning kommer att använda reaktionsikoner så installera det genom att köra kommandot nedan.
garn lägg till reaktionsikoner
Importera sedan ikonerna högst upp på Underrättelse komponent.
importera { RxCross2, RxInfoCircled } från"react-ikoner/rx"
Nu kan du modifiera komponenten så att den använder ikonerna, titeln och beskrivningsvärdena för att skapa innehållet i meddelandet.
exporterastandardfungeraUnderrättelse({typ, titel, beskrivning}) {
lämna tillbaka (
{title}</div>
{beskrivning}</div>
</div>
</div>
</div>
)
}
Nästa steg är att styla den beroende på vilken typ som skickas in.
Ett tillvägagångssätt du kan ta är att definiera CSS-klasser för varje typ av meddelande du vill visa. Du kan sedan villkorligt tillämpa lämplig klass baserat på typen som skickas in.
Börja med att skapa en ny fil som heter notification.css och importera in den Notification.jsx genom att lägga till följande kod överst.
importera "./notification.css"
Sedan i notification.css definiera basstilarna för meddelandekomponenten:
.underrättelse {
visa: böja;
flex-riktning: rad;
align-objekt: flex-start;
stoppning: 8px;
}
.notification__left {
visa: böja;
flex-riktning: rad;
stoppning: 0px;
glipa: 8px;
marginal-höger: 24px;
}
.notification__content {
visa: böja;
flex-riktning: kolumn;
align-objekt: flex-start;
stoppning: 0px;
}
.notification__title {
typsnittsfamilj: "Inter";
typsnitt: vanligt;
teckensnittsvikt: 500;
textstorlek: 14px;
}
.notification__description {
typsnittsfamilj: "Inter";
typsnitt: vanligt;
teckensnittsvikt: 400;
textstorlek: 12px;
stoppning: 0;
}
Du kan sedan definiera stilarna för de olika meddelandetyperna genom att lägga till följande kod i CSS-filen.
.notification__success {
bakgrund: #f6fef9;
gräns: 1pxfast#2f9461;
gränsradie: 8px;
}
.notification__error {
bakgrund: #fffbfa;
gräns: 1pxfast#cd3636;
gränsradie: 8px;
}
.notification__warning {
bakgrund: #fffcf5;
gräns: 1pxfast#c8811a;
gränsradie: 8px;
}
Ovanstående kod utformar meddelandebehållaren baserat på typen som skickas in.
För att anpassa titeln, använd följande stilar.
.notification__title__success {
Färg: #2f9461;
}
.notification__title__warning {
Färg: #c8811a;
}
.notification__title__error {
Färg: #cd3636;
}
Använd dessa stilar för den anpassade beskrivningstexten.
.notification__description__success {
Färg: #53b483;
}
.notification__description__warning {
Färg: #e9a23b;
}
.notification__description__error {
Färg: #f34141;
}
Och för ikonerna, använd följande klasser.
.notification_icon_error {
Färg: #cd3636;
}
.notification__icon__framgång {
Färg: #2f9461;
}
.notification__icon__warning {
Färg: #c8811a;
}
Sedan, i Underrättelse komponent kan du villkorligt tillämpa lämplig klass baserat på typ prop, så här:
exporterastandardfungeraUnderrättelse({typ, titel, beskrivning}) {
lämna tillbaka (
`aviseringsmeddelande__${type}`}>
`notification__left`}>
`meddelande__ikon__${type}`}/>
"notification__content">
`notification__title notification__title__${type}`}>{title}</div>
`notification__description notification__description__${type}`}>{description}</div>
</div>
</div>
`meddelande__ikon__${type}`}/>
</div>
)
}
I den här komponenten ställer du dynamiskt in klassen beroende på typen som t.ex notification__framgång eller notification__error.
För att se detta i praktiken, importera aviseringskomponenten till App.jsx och använd den enligt följande:
importera Underrättelse från'./Underrättelse'fungeraApp() {
lämna tillbaka (
<>
typ="Framgång"
titel="Uppgiften slutförd"
beskrivning="Din uppgift har slutförts framgångsrikt."
/>
</>
)
}
exporterastandard App
Nu kan du skicka en annan typ till Underrättelse komponent och skicka ett lämpligt meddelande som matchar meddelandet.
Detta är viktigt för en bra användarupplevelse eftersom användare har kommit att associera olika färger och stilar med olika scenarier, och det är viktigt att använda dessa associationer konsekvent. Det skulle till exempel vara förvirrande att låta en användare veta att de har laddat upp ett foto i en röd meddelanderuta. De kanske tror att uppladdningen misslyckades, även om den lyckades.
Lägga till interaktivitet till meddelandekomponenten
Du har lärt dig hur du kan använda rekvisita för att skapa en anpassningsbar aviseringskomponent. För att ta det ännu längre kan du lägga till övergångar till den här komponenten för att göra den mer engagerande. Du kan till exempel använda CSS-animationer för att skjuta aviseringskomponenten till skärmen och skjuta ut den efter att en viss varaktighet har passerat.
