Budowanie angażujących powiadomień za pomocą Toastra w React

Powiadomienia są niezbędne w każdej aplikacji internetowej, ponieważ dostarczają użytkownikom ważnych informacji. Zamiast budować system powiadomień od podstaw, możesz skorzystać z zewnętrznych bibliotek. Toastr to jedna z popularnych bibliotek do tworzenia powiadomień w aplikacjach JavaScript.

Instalowanie biblioteki Toastr

Najpierw zacznij od stworzenia aplikacji React, z którą będziesz pracować. Możesz stworzyć aplikację React za pomocą Vite.

Po utworzeniu aplikacji zainstaluj toster package w swoim projekcie, uruchamiając następującą komendę w swoim terminalu:

npm install --save toastr

Teraz zainstalowałeś toster package i może go używać do wyświetlania powiadomień.

Tworzenie powiadomień za pomocą Toastr

Aby utworzyć powiadomienia, użyjesz toster funkcjonować. The toster służy do tworzenia i wyświetlania wyskakujących komunikatów. Przed utworzeniem powiadomień upewnij się, że zaimportowałeś plik toster style powiadomień w pliku CSS.

@import'toastr';

Oto przykład tworzenia powiadomienia za pomocą toster funkcjonować:

import React from"react";
import toastr from"toastr";
functionApp() {
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome");
 };
return (



Click Me</button>
 </div>
 );
}
exportdefault App;

W tym przykładzie zdefiniujesz a notyfikować funkcjonować. The Kliknij przycisk wywołuje notyfikować funkcja po kliknięciu na nią. The notyfikować funkcja korzysta z toastr.sukces funkcję wyświetlania powiadomienia o sukcesie.

The toastr.sukces funkcja przyjmuje dwa argumenty. Pierwszym argumentem jest powiadomienie, którym w tym przypadku jest ciąg znaków „Miło cię tu mieć”. Drugim argumentem jest tytuł powiadomienia, "Powitanie".

Po kliknięciu przycisku pojawi się powiadomienie podobne do poniższego obrazu Kliknij przycisk.

Dodatkowo toastr.sukces funkcja, tzw toster obiekt zapewnia inne funkcje do tworzenia powiadomień. Pozostałe funkcje to tzw toastr.błąd, toastr.ostrzeżenie, I toastr.info. Każda funkcja tworzy powiadomienie z innym kolorem tła i ikoną, dzięki czemu można łatwo rozróżnić różne typy powiadomień.

Na przykład, gdy używasz toastr.błąd funkcji, Twoje powiadomienie będzie wyglądać tak:

Dostosowywanie powiadomień

Dzięki bibliotece Toastr nie możesz dostosować powiadomień za pomocą tradycyjnego CSS, w przeciwieństwie do podczas pracy z React-Toastify. Jednak Toastr nadal zapewnia inne opcje dostosowywania powiadomień. Możesz użyć tych opcji, aby dostosować pozycję, wygląd i funkcjonalność powiadomień. Musisz przekazać opcje do trzeciego argumentu metody toster metoda.

Oto przykład:

import React from"react";
import toastr from"toastr";
functionApp() {
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome", {
 closeButton: true,
 progressBar: true,
 timeOut: 3000,
 positionClass: "toast-top-center",
 showMethod: "fadeIn",
 hideMethod: "fadeOut",
 });
 };
return (



Click Me</button>
 </div>
 );
}
exportdefault App;

Aby dostosować powiadomienie, ten kod używa rozszerzenia zamknijPrzycisk, pasek postępu, koniec czasu, pozycjaKlasa, PokażMetodę, I ukryjMetoda właściwości obiektu opcji. The zamknijPrzycisk określa, czy powiadomienie będzie wyświetlane z przyciskiem zamknięcia. Akceptuje wartość logiczną.

Używając pasek postępu właściwość, możesz dodać pasek postępu do powiadomienia. Ustawianie koniec czasu pozwala kontrolować, jak długo będzie wyświetlane powiadomienie. Ta właściwość określa liczbę milisekund przed automatycznym zniknięciem powiadomienia.

The pozycjaKlasa właściwość określa pozycję powiadomienia na ekranie. Akceptuje osiem predefiniowanych wartości. Wartości obejmują:

• toast-prawy górny róg: wyświetla powiadomienie w prawym górnym rogu ekranu.
• toast-górny-lewy: Powiadomienie zostanie wyświetlone w lewym górnym rogu ekranu.
• toast-top-centrum: Powiadomienie pojawi się w górnej środkowej części ekranu.
• tost-dolny-prawy: Powiadomienie zobaczysz w prawym dolnym rogu ekranu.
• tost-dolny-lewy: Powiadomienie jest umieszczone w lewym dolnym rogu ekranu.
• toast-dół-centrum: Powiadomienie znajdziesz w dolnej środkowej części ekranu.
• toast-top-pełna szerokość: powiadomienie pojawia się u góry ekranu, wypełniając całą szerokość ekranu.
• toast-bottom-pełna szerokość: Powiadomienie wypełnia całą szerokość ekranu i jest wyświetlane na dole.

Wreszcie, PokażMetodę I ukryjMetoda properties kontrolują animacje wyświetlania i ukrywania powiadomienia. The PokażMetodę właściwość określa animację używaną do wyświetlania powiadomienia, podczas gdy właściwość ukryjMetoda właściwość określa animację używaną do ukrywania powiadomienia.

Powiadomienie zdefiniowane w powyższym bloku kodu pojawi się w górnej środkowej części ekranu, z paskiem postępu i przyciskiem zamykania. Zniknie po trzech sekundach i użyje przejść pojawiania się i zanikania, aby pojawiać się i znikać.

Będzie to wyglądać mniej więcej tak.

Pamiętaj, że możesz dostosować każde powiadomienie Toastr za pomocą pojedynczego obiektu opcji zamiast dostosowywać je pojedynczo. Aby to zrobić, użyjesz tosty.opcje nieruchomość. Ten obiekt właściwości zawiera właściwości dostosowywania wszystkich powiadomień Toastr.

Na przykład:

import React from"react";
import toastr from"toastr";
functionApp() {
 toastr.options = {
 closeButton: true,
 progressBar: true,
 positionClass: "toast-top-right",
 timeOut: 5000,
 showMethod: "fadeIn",
 hideMethod: "fadeOut",
 };
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome");
 };
const displayError = () => {
 toastr.error("You ran into an error", "Sorry");
 };
return (



Click Me</button>
Error</button>
 </div>
 );
}
exportdefault App;

Ten przykład pokazuje, jak skonfigurować wszystkie powiadomienia, aby miały pasek postępu, przycisk zamykania i wyświetlanie w prawym górnym rogu rogu ekranu, zamyka się automatycznie po 5 sekundach i używa przejść pojawiania się i zanikania, aby pojawiać się i zniknąć.

Uruchomienie aplikacji i kliknięcie przycisków spowoduje wyrenderowanie interfejsu, który będzie wyglądał jak na poniższym obrazku.

Spraw, aby Twoje powiadomienia były interaktywne

Możesz uatrakcyjnić swoje powiadomienia, dodając interaktywność, taką jak możliwość ich kliknięcia. Aby to zrobić, użyj na kliknięcie nieruchomość. The na kliknięcie właściwość jest jedną z opcji dostosowywania udostępnianych przez bibliotekę Toastr. Określa funkcję uruchamianą po kliknięciu powiadomienia, podobną do zdarzenie kliknięcia (jeden z detektorów zdarzeń JavaScript).

Oto przykład, jak użyć na kliknięcie nieruchomość:

import React from"react";
import toastr from"toastr";
functionApp() {
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome", {
 onclick: () => {
 toastr.clear();
 },
 });
 };
return (



Click Me</button>
 </div>
 );
}
exportdefault App;

W powyższym bloku kodu obiekt options obiektu toastr.sukces funkcja zawiera na kliknięcie nieruchomość. The na kliknięcie właściwość nazywa toastr.wyczyść funkcja, która usuwa powiadomienie z ekranu.

Twórz atrakcyjne powiadomienia za pomocą Toastr

Tutaj nauczyłeś się, jak używać biblioteki Toastr do tworzenia angażujących powiadomień dla Twojej aplikacji React. Zainstalowałeś Toastra, skonfigurowałeś go w swojej aplikacji oraz utworzyłeś i dostosowałeś swoje powiadomienia. Toastr to potężna biblioteka, która może pomóc w tworzeniu informacyjnych i atrakcyjnych wizualnie powiadomień. Oprócz Toastra możesz także wypróbować inne biblioteki, takie jak SweetAlert, React-Toastify lub Chakra UI.