So erstellen Sie eine benutzerdefinierte Benachrichtigungskomponente in React

In React sind mehrere Pakete von Drittanbietern verfügbar, die Ihnen beim Erstellen einer Benachrichtigungskomponente helfen können. Wenn Sie jedoch nur eine einfache Benachrichtigungskomponente benötigen, können Sie eine eigene erstellen, um zu vermeiden, dass Ihrer Anwendung unnötige Abhängigkeiten hinzugefügt werden.

Einrichten des Projekts

Du wirst Verwenden Sie Vite, um die React-App einzurichten. Vite ist ein Build-Tool, mit dem Sie schnell ein React-Projekt erstellen können.

Verwenden Sie zunächst den Garnpaket-Manager, um ein neues Vite-Projekt zu erstellen, indem Sie den folgenden Befehl ausführen.

Garn erstellen vite

Der Befehl fordert Sie auf, einen Projektnamen einzugeben. Geben Sie den Namen des Projekts ein und drücken Sie die Eingabetaste. Als Nächstes werden Sie aufgefordert, ein Framework auszuwählen. Wählen reagieren und drücken Sie die Eingabetaste. Abschließend werden Sie aufgefordert, eine Variante auszuwählen und auszuwählen

JavaScript und drücken Sie dann die Eingabetaste.

Hier sind die Konfigurationen, die dieses Tutorial verwenden wird:

Nachdem Vite das Projekt erstellt hat, navigieren Sie zum Projektordner und öffnen Sie ihn mit einem Code-Editor.

Anschließend können Sie den Entwicklungsserver starten, indem Sie den folgenden Befehl ausführen.

Garnentw

Dadurch wird Ihre neue React-Anwendung in Ihrem Standardbrowser geöffnet http://localhost: 5173/.

Entwerfen der Benachrichtigungskomponente

Um eine flexible Benachrichtigungskomponente zu erstellen, muss diese in der Lage sein, verschiedene Arten von Benachrichtigungen mit unterschiedlichen Titeln, Beschreibungen und Stilen zu verarbeiten. Es muss beispielsweise eine Warnung, eine Erfolgsmeldung und eine Fehlermeldung ausgeben.

Hier sind verschiedene Variationen, die die Benachrichtigungskomponente rendern können sollte.

Sie können dies erreichen, indem Sie Requisiten an die Komponente übergeben, die den Typ der anzuzeigenden Benachrichtigung, den Titel und den Beschreibungstext angeben. Mithilfe dieser Requisiten können Sie die Komponente anpassen und mit minimalem Aufwand in Ihrer gesamten Anwendung wiederverwenden. Wenn Sie eine Auffrischung zum Thema Requisiten benötigen, finden Sie hier einen erklärenden Artikel wie man Requisiten in React verwendet.

Erstellen der Benachrichtigungskomponente

Im src Ordner, erstellen Sie eine neue Datei mit dem Namen Notification.jsx und fügen Sie den folgenden Code hinzu.

ExportStandardFunktionBenachrichtigung({Typ, Titel, Beschreibung}) {
zurückkehren (


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

Dieser Code erstellt eine funktionale Komponente namens Benachrichtigung mit drei Requisiten: Typ, Titel, Und Beschreibung. Sie verwenden diese Requisiten, um den Stil und Inhalt der Benachrichtigung anzupassen.

Vom Design her verfügt die Komponente über einige Symbole, nämlich Informationen und ein Kreuzsymbol. Du kannst Laden Sie kostenlose Symbole herunter oder verwenden Sie eine Symbolkomponente aus einem Paket wie Reaktionssymbole. Dieses Tutorial wird verwendet Reaktionssymbole Installieren Sie es also, indem Sie den folgenden Befehl ausführen.

Garn fügt Reaktionssymbole hinzu

Importieren Sie dann die Symbole oben im Benachrichtigung Komponente.

importieren { RxCross2, RxInfoCircled } aus„react-icons/rx“

Jetzt können Sie die Komponente so ändern, dass sie die Symbole, den Titel und die Beschreibungs-Requisitenwerte verwendet, um den Inhalt der Benachrichtigung zu erstellen.

ExportStandardFunktionBenachrichtigung({Typ, Titel, Beschreibung}) {
zurückkehren (







{Titel}</div>
{Beschreibung}</div>
 </div>
 </div>

 </div>
 )
}

Der nächste Schritt besteht darin, es abhängig vom übergebenen Typ zu formatieren.

Ein möglicher Ansatz besteht darin, CSS-Klassen für jeden Benachrichtigungstyp zu definieren, den Sie anzeigen möchten. Anschließend können Sie die entsprechende Klasse basierend auf dem übergebenen Typ bedingt anwenden.

Erstellen Sie zunächst eine neue Datei mit dem Namen Benachrichtigung.css und importieren Sie es Notification.jsx indem Sie oben den folgenden Code hinzufügen.

importiere „./notification.css“

Dann in Benachrichtigung.css Definieren Sie die Basisstile für die Benachrichtigungskomponente:

.Benachrichtigung {
Anzeige: biegen;
Flex-Richtung: Reihe;
align-items: Flex-Start;
Polsterung: 8px;
}
.notification__left {
Anzeige: biegen;
Flex-Richtung: Reihe;
Polsterung: 0px;
Lücke: 8px;
Rand rechts: 24px;
}
.notification__content {
Anzeige: biegen;
Flex-Richtung: Spalte;
align-items: Flex-Start;
Polsterung: 0px;
}
.notification__title {
Schriftfamilie: "Inter";
Schriftstil: normal;
Schriftstärke: 500;
Schriftgröße: 14px;
}
.notification__description {
Schriftfamilie: "Inter";
Schriftstil: normal;
Schriftstärke: 400;
Schriftgröße: 12px;
Polsterung: 0;
}

Anschließend können Sie die Stile für die verschiedenen Benachrichtigungstypen definieren, indem Sie der CSS-Datei den folgenden Code hinzufügen.

.notification__success {
Hintergrund: #f6fef9;
Grenze: 1pxsolide#2f9461;
Grenzradius: 8px;
}
.notification__error {
Hintergrund: #fffbfa;
Grenze: 1pxsolide#cd3636;
Grenzradius: 8px;
}
.notification__warning {
Hintergrund: #fffcf5;
Grenze: 1pxsolide#c8811a;
Grenzradius: 8px;
}

Der obige Code formatiert den Benachrichtigungscontainer basierend auf dem übergebenen Typ.

Um den Titel anzupassen, verwenden Sie die folgenden Stile.

.notification__title__success {
Farbe: #2f9461;
}
.notification__title__warning {
Farbe: #c8811a;
}
.notification__title__error {
Farbe: #cd3636;
}

Verwenden Sie für den benutzerdefinierten Beschreibungstext diese Stile.

.notification__description__success {
Farbe: #53b483;
}
.notification__description__warning {
Farbe: #e9a23b;
}
.notification__description__error {
Farbe: #f34141;
}

Und für die Symbole verwenden Sie die folgenden Klassen.

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

Dann, im Benachrichtigung Komponente können Sie die entsprechende Klasse basierend auf der bedingt anwenden Typ Requisite, so:

ExportStandardFunktionBenachrichtigung({Typ, Titel, Beschreibung}) {
zurückkehren (
`Benachrichtigung Benachrichtigung__${Typ}`}>
`Benachrichtigung__links`}>
`Benachrichtigung__icon__${Typ}`}/>
„Benachrichtigung_Inhalt“>
`Benachrichtigung__Titel Benachrichtigung__Titel__${Typ}`}>{Titel}</div>
`Benachrichtigung__Beschreibung Benachrichtigung__Beschreibung__${Typ}`}>{Beschreibung}</div>
 </div>
 </div>
`Benachrichtigung__icon__${Typ}`}/>
 </div>
 )
}

In dieser Komponente legen Sie die Klasse je nach Typ dynamisch fest, z Benachrichtigung__Erfolg oder Benachrichtigung__Fehler.

Um dies in Aktion zu sehen, importieren Sie die Benachrichtigungskomponente in App.jsx und verwenden Sie es wie folgt:

importieren Benachrichtigung aus'./Benachrichtigung'
FunktionApp() {
zurückkehren (
 <>
 Typ="Erfolg"
 Titel="Aufgabe erledigt"
 Beschreibung=„Ihre Aufgabe wurde erfolgreich abgeschlossen.“
 />
 </>
 )
}
ExportStandard App

Jetzt können Sie einen anderen Typ an übergeben Benachrichtigung Komponente und rendern Sie eine entsprechende Benachrichtigung, die der Nachricht entspricht.

Dies ist für eine gute Benutzererfahrung von wesentlicher Bedeutung, da Benutzer unterschiedliche Farben und Stile mit unterschiedlichen Szenarien assoziieren und es wichtig ist, diese Assoziationen konsistent zu verwenden. Es wäre beispielsweise verwirrend, einem Benutzer in einem roten Benachrichtigungsfeld mitzuteilen, dass er ein Foto erfolgreich hochgeladen hat. Sie denken möglicherweise, dass der Upload fehlgeschlagen ist, selbst wenn er erfolgreich war.

Hinzufügen von Interaktivität zur Benachrichtigungskomponente

Sie haben gelernt, wie Sie mithilfe von Requisiten eine anpassbare Benachrichtigungskomponente erstellen können. Um noch weiter zu gehen, können Sie dieser Komponente Übergänge hinzufügen, um sie ansprechender zu gestalten. Sie können beispielsweise CSS-Animationen verwenden, um die Benachrichtigungskomponente auf den Bildschirm zu schieben und nach Ablauf einer bestimmten Dauer wieder herauszuschieben.