Jak stworzyć niestandardowy komponent powiadomień w React

W React dostępnych jest kilka pakietów innych firm, które mogą pomóc w utworzeniu komponentu powiadomień. Jeśli jednak potrzebujesz tylko prostego składnika powiadomień, możesz utworzyć własny, aby uniknąć dodawania niepotrzebnych zależności do aplikacji.

Konfigurowanie projektu

Będziesz użyj Vite, aby skonfigurować aplikację React. Vite to narzędzie do budowania, które pozwala szybko zbudować rusztowanie projektu React.

Aby rozpocząć, użyj menedżera pakietów przędzy, aby utworzyć nowy projekt Vite, uruchamiając poniższe polecenie.

przędza tworzy vite

Polecenie wyświetli monit o wprowadzenie nazwy projektu. Wprowadź nazwę projektu i naciśnij Enter. Następnie pojawi się monit o wybranie struktury. Wybierać reagować i naciśnij Enter. Na koniec poprosi Cię o wybranie wariantu, wybierz JavaScript a następnie naciśnij Enter.

Oto konfiguracje, których użyje ten samouczek:

Po utworzeniu projektu przez firmę Vite przejdź do folderu projektu i otwórz go za pomocą edytora kodu.

Następnie możesz uruchomić serwer programistyczny, uruchamiając następujące polecenie.

rozwinięcie przędzy

Spowoduje to otwarcie nowej aplikacji React w domyślnej przeglądarce pod adresem http://localhost: 5173/.

Projektowanie komponentu powiadomień

Aby stworzyć elastyczny komponent powiadomień, musi on obsługiwać różne typy powiadomień o różnych tytułach, opisach i stylach. Na przykład musi renderować ostrzeżenie, powiadomienie o powodzeniu i błędzie.

Oto różne odmiany, które komponent powiadomień powinien być w stanie renderować.

Możesz to osiągnąć, przekazując właściwości do komponentu, który określa typ powiadomienia do renderowania, tytuł i tekst opisu. Korzystając z tych rekwizytów, możesz dostosować komponent i użyć go ponownie w całej aplikacji przy minimalnym wysiłku. Jeśli potrzebujesz odświeżenia wiedzy na temat rekwizytów, oto artykuł wyjaśniający jak używać rekwizytów w React.

Tworzenie komponentu powiadomień

w źródło folder, utwórz nowy plik o nazwie Powiadomienie.jsx i dodaj następujący kod.

eksportdomyślnyfunkcjonowaćPowiadomienie({typ, tytuł, opis}) {
powrót (


 {/* Treść powiadomienia */}
 </div>
 )
}

Ten kod tworzy funkcjonalny komponent o nazwie Powiadomienie z trzema rekwizytami: typ, tytuł, I opis. Użyjesz tych rekwizytów, aby dostosować styl i treść powiadomienia.

Z projektu komponent ma kilka ikon, a mianowicie informacje i ikonę krzyża. Możesz pobierz darmowe ikony lub użyj komponentu ikony z pakietu, takiego jak ikony reakcji. Ten samouczek będzie używany ikony reakcji więc zainstaluj go, uruchamiając poniższe polecenie.

przędza dodaj ikony reakcji

Następnie zaimportuj ikony u góry pliku Powiadomienie część.

import { RxKrzyż2, RxInfoZakreślone} z"reaguj-ikony/rx"

Teraz możesz zmodyfikować komponent tak, aby używał wartości ikon, tytułu i właściwości opisu do tworzenia treści powiadomienia.

eksportdomyślnyfunkcjonowaćPowiadomienie({typ, tytuł, opis}) {
powrót (







{tytuł}</div>
{opis}</div>
 </div>
 </div>

 </div>
 )
}

Następnym krokiem jest nadanie mu stylu w zależności od przekazanego typu.

Jednym ze sposobów, które możesz zastosować, jest zdefiniowanie klas CSS dla każdego typu powiadomienia, które chcesz wyświetlić. Następnie można warunkowo zastosować odpowiednią klasę na podstawie przekazanego typu.

Aby rozpocząć, utwórz nowy plik o nazwie powiadomienie.css i zaimportować go Powiadomienie.jsx dodając następujący kod na górze.

importuj „./notification.css”

potem w powiadomienie.css zdefiniuj podstawowe style dla komponentu powiadomień:

.powiadomienie {
wyświetlacz: przewód;
kierunek zginania: wiersz;
wyrównaj elementy: elastyczny start;
wyściółka: 8piks;
}
.powiadomienie__pozostałe {
wyświetlacz: przewód;
kierunek zginania: wiersz;
wyściółka: 0piks;
luka: 8piks;
prawy margines: 24piks;
}
.notification__content {
wyświetlacz: przewód;
kierunek zginania: kolumna;
wyrównaj elementy: elastyczny start;
wyściółka: 0piks;
}
.tytuł__powiadomienia {
rodzina czcionek: "Pochować";
styl czcionki: normalna;
grubość czcionki: 500;
rozmiar czcionki: 14piks;
}
.powiadomienie__opis {
rodzina czcionek: "Pochować";
styl czcionki: normalna;
grubość czcionki: 400;
rozmiar czcionki: 12piks;
wyściółka: 0;
}

Następnie możesz zdefiniować style dla różnych typów powiadomień, dodając następujący kod w pliku CSS.

.powiadomienie__sukces {
tło: #f6fef9;
granica: 1pikssolidny#2f9461;
promień granicy: 8piks;
}
.powiadomienie__błąd {
tło: #ffffbfa;
granica: 1pikssolidny#cd3636;
promień granicy: 8piks;
}
.powiadomienie__ostrzeżenie {
tło: #fffcf5;
granica: 1pikssolidny#c8811a;
promień granicy: 8piks;
}

Powyższy kod stylizuje kontener powiadomień na podstawie przekazanego typu.

Aby dostosować tytuł, użyj następujących stylów.

.notification__title__sukces {
kolor: #2f9461;
}
.notification__title__ostrzeżenie {
kolor: #c8811a;
}
.notification__title__błąd {
kolor: #cd3636;
}

W przypadku niestandardowego tekstu opisu użyj tych stylów.

.notification__description__sukces {
kolor: #53b483;
}
.notification__description__ostrzeżenie {
kolor: #e9a23b;
}
.powiadomienie__opis__błąd {
kolor: #f34141;
}

A w przypadku ikon użyj następujących klas.

.notification_icon_error {
kolor: #cd3636;
}
.powiadomienie__ikona__sukces {
kolor: #2f9461;
}
.powiadomienie__ikona__ostrzeżenie {
kolor: #c8811a;
}

Następnie w Powiadomienie komponent, możesz warunkowo zastosować odpowiednią klasę na podstawie typ prop, tak:

eksportdomyślnyfunkcjonowaćPowiadomienie({typ, tytuł, opis}) {
powrót (
`powiadomienie powiadomienie__${typ}`}>
`powiadomienie__pozostawione`}>
`powiadomienie__ikona__${typ}`}/>
„powiadomienie__treść”>
`powiadomienie__tytuł powiadomienie__tytuł__${typ}`}>{tytuł}</div>
`powiadomienie__opis powiadomienie__opis__${typ}`}>{opis}</div>
 </div>
 </div>
`powiadomienie__ikona__${typ}`}/>
 </div>
 )
}

W tym komponencie dynamicznie ustawiasz klasę w zależności od typu, takiego jak powiadomienie__sukces Lub powiadomienie__błąd.

Aby zobaczyć, jak to działa, zaimportuj komponent Notification do Aplikacja.jsx i użyj go w następujący sposób:

import Powiadomienie z'./Powiadomienie'
funkcjonowaćAplikacja() {
powrót (
 <>
 typ="powodzenie"
 tytuł="Zadanie ukończone"
 opis="Twoje zadanie zostało zakończone pomyślnie."
 />
 </>
 )
}
eksportdomyślny Aplikacja

Teraz możesz przekazać inny typ do metody Powiadomienie komponent i wyrenderuj odpowiednie powiadomienie, które pasuje do komunikatu.

Jest to niezbędne dla dobrego doświadczenia użytkownika, ponieważ użytkownicy przyzwyczaili się do kojarzenia różnych kolorów i stylów z różnymi scenariuszami i ważne jest, aby konsekwentnie używać tych skojarzeń. Na przykład mylące byłoby poinformowanie użytkownika, że ​​pomyślnie przesłał zdjęcie w czerwonym polu powiadomienia. Mogą pomyśleć, że przesyłanie się nie powiodło, nawet jeśli się powiodło.

Dodanie interaktywności do komponentu powiadomień

Wiesz już, jak używać rekwizytów do tworzenia konfigurowalnego komponentu powiadomień. Aby pójść jeszcze dalej, możesz dodać przejścia do tego komponentu, aby uczynić go bardziej wciągającym. Możesz na przykład użyć animacji CSS, aby przesunąć komponent powiadomień na ekran i wysunąć go po upływie określonego czasu.