Δημιουργία ελκυστικών ειδοποιήσεων με το Toastr στο React

Οι ειδοποιήσεις είναι απαραίτητες για κάθε διαδικτυακή εφαρμογή, καθώς παρέχουν στους χρήστες σημαντικές πληροφορίες. Αντί να δημιουργήσετε το σύστημα ειδοποιήσεων από την αρχή, μπορείτε να χρησιμοποιήσετε εξωτερικές βιβλιοθήκες. Το Toastr είναι μια από τις δημοφιλείς βιβλιοθήκες για τη δημιουργία ειδοποιήσεων σε εφαρμογές JavaScript.

Εγκατάσταση της βιβλιοθήκης Toastr

Αρχικά, ξεκινήστε δημιουργώντας μια εφαρμογή React με την οποία θα εργαστείτε. Μπορείς δημιουργήστε μια εφαρμογή React χρησιμοποιώντας το Vite.

Αφού δημιουργήσετε την εφαρμογή, εγκαταστήστε το τοστιέρα πακέτο στο έργο σας εκτελώντας την ακόλουθη εντολή στο τερματικό σας:

npm install --save toastr

Τώρα έχετε εγκαταστήσει το τοστιέρα πακέτο και μπορεί να το χρησιμοποιήσει για την εμφάνιση ειδοποιήσεων.

Δημιουργία ειδοποιήσεων με χρήση Toastr

Για να δημιουργήσετε τις ειδοποιήσεις, θα χρησιμοποιήσετε το

τοστιέρα λειτουργία. ο τοστιέρα Η λειτουργία χρησιμοποιείται για τη δημιουργία και την εμφάνιση μηνυμάτων τοστ. Πριν δημιουργήσετε τις ειδοποιήσεις σας, βεβαιωθείτε ότι έχετε εισάγει τοστιέρα στυλ ειδοποιήσεων στο αρχείο CSS σας.

@import'toastr';

Ακολουθεί ένα παράδειγμα για το πώς δημιουργείτε μια ειδοποίηση χρησιμοποιώντας το τοστιέρα λειτουργία:

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;

Σε αυτό το παράδειγμα, ορίζετε α κοινοποιώ λειτουργία. ο Κάντε κλικ στο Me το κουμπί καλεί το κοινοποιώ λειτουργεί όταν κάνετε κλικ σε αυτό. ο κοινοποιώ η συνάρτηση χρησιμοποιεί το τοστιέρα.επιτυχία λειτουργία για εμφάνιση ειδοποίησης επιτυχίας.

ο τοστιέρα.επιτυχία η συνάρτηση παίρνει δύο ορίσματα. Το πρώτο όρισμα είναι το μήνυμα ειδοποίησης που, σε αυτήν την περίπτωση, είναι η συμβολοσειρά «Χαίρομαι που σε έχω εδώ». Το δεύτερο επιχείρημα είναι ο τίτλος της ειδοποίησης, "Καλως ΗΡΘΑΤΕ".

Μια ειδοποίηση παρόμοια με την παρακάτω εικόνα θα εμφανιστεί όταν κάνετε κλικ στο Κάντε κλικ στο Me κουμπί.

Επιπρόσθετα με τοστιέρα.επιτυχία λειτουργία, η τοστιέρα Το αντικείμενο παρέχει άλλες λειτουργίες για τη δημιουργία ειδοποιήσεων. Οι άλλες λειτουργίες είναι οι τοστ.λάθος, τοστιέρα.προειδοποίηση, και toastr.info. Κάθε λειτουργία δημιουργεί μια ειδοποίηση με διαφορετικό χρώμα φόντου και εικονίδιο, ώστε να μπορείτε εύκολα να διακρίνετε διαφορετικούς τύπους ειδοποιήσεων.

Για παράδειγμα, όταν χρησιμοποιείτε το τοστ.λάθος λειτουργία, η ειδοποίησή σας θα μοιάζει με αυτό:

Προσαρμογή των ειδοποιήσεών σας

Με τη βιβλιοθήκη Toastr, δεν μπορείτε να προσαρμόσετε τις ειδοποιήσεις σας χρησιμοποιώντας το παραδοσιακό CSS, σε αντίθεση με όταν εργάζεστε με το React-Toastify. Ωστόσο, το Toastr εξακολουθεί να παρέχει άλλες επιλογές για την προσαρμογή των ειδοποιήσεων. Μπορείτε να χρησιμοποιήσετε αυτές τις επιλογές για να προσαρμόσετε τη θέση, την εμφάνιση και τη λειτουργικότητα των ειδοποιήσεών σας. Πρέπει να περάσετε τις επιλογές στο τρίτο όρισμα του τοστιέρα μέθοδος.

Εδώ είναι ένα παράδειγμα:

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;

Για να προσαρμόσετε την ειδοποίηση, αυτός ο κωδικός χρησιμοποιεί το Κλείσιμο Κουμπί, progressBar, τέλος χρόνου, θέσηΚλάση, showMethod, και hideMethod ιδιότητες του αντικειμένου επιλογές. ο Κλείσιμο Κουμπί Η ιδιότητα καθορίζει εάν η ειδοποίησή σας θα εμφανίζεται με ένα κουμπί κλεισίματος. Δέχεται μια τιμή boolean.

Χρησιμοποιώντας την progressBar ιδιοκτησία, μπορείτε να προσθέσετε μια γραμμή προόδου στην ειδοποίηση. Ρύθμιση του τέλος χρόνου Η ιδιότητα σάς επιτρέπει να ελέγχετε πόσο καιρό θα εμφανίζεται μια ειδοποίηση. Αυτή η ιδιότητα καθορίζει τον αριθμό των χιλιοστών του δευτερολέπτου πριν η ειδοποίηση εξαφανιστεί αυτόματα.

ο θέσηΚλάση Η ιδιότητα καθορίζει τη θέση της ειδοποίησης στην οθόνη σας. Δέχεται οκτώ προκαθορισμένες τιμές. Οι τιμές περιλαμβάνουν:

• τοστ-πάνω-δεξιά: Εμφανίζει την ειδοποίηση στην επάνω δεξιά γωνία της οθόνης σας.
• τοστ-πάνω-αριστερά: Η ειδοποίηση θα εμφανιστεί στην επάνω αριστερή γωνία της οθόνης σας.
• τοστ-τοπ-κέντρο: Η ειδοποίηση θα εμφανιστεί στο επάνω κέντρο της οθόνης σας.
• τοστ-κάτω-δεξιά: Θα δείτε την ειδοποίηση στην κάτω δεξιά γωνία της οθόνης σας.
• τοστ-κάτω-αριστερά: Η ειδοποίηση τοποθετείται στην κάτω αριστερή γωνία της οθόνης σας.
• τοστ-κάτω-κέντρο: Θα βρείτε την ειδοποίηση στο κάτω κέντρο της οθόνης.
• τοστ-κορυφή-πλήρες πλάτος: Η ειδοποίηση εμφανίζεται στο επάνω μέρος της οθόνης σας, καλύπτοντας ολόκληρο το πλάτος της οθόνης.
• τοστ-κάτω-πλήρως-πλάτος: Η ειδοποίηση καλύπτει όλο το πλάτος της οθόνης σας και εμφανίζεται στο κάτω μέρος.

Τέλος, το showMethod και hideMethod Οι ιδιότητες ελέγχουν τα κινούμενα σχέδια για την εμφάνιση και την απόκρυψη της ειδοποίησης. ο showMethod Η ιδιότητα καθορίζει την κινούμενη εικόνα που χρησιμοποιείται για την εμφάνιση μιας ειδοποίησης, ενώ η hideMethod Η ιδιότητα καθορίζει την κινούμενη εικόνα που χρησιμοποιείται για την απόκρυψη μιας ειδοποίησης.

Η ειδοποίηση που ορίζεται στο μπλοκ κωδικών παραπάνω θα εμφανιστεί στο επάνω κέντρο της οθόνης σας, με μια γραμμή προόδου και ένα κουμπί κλεισίματος. Θα εξαφανιστεί μετά από τρία δευτερόλεπτα και θα χρησιμοποιήσει τις μεταβάσεις fade-in και fade-out για να εμφανιστεί και να εξαφανιστεί.

Θα μοιάζει κάπως έτσι.

Λάβετε υπόψη ότι μπορείτε να προσαρμόσετε κάθε ειδοποίηση Toastr με ένα αντικείμενο επιλογών αντί να τις προσαρμόσετε μία κάθε φορά. Για να το κάνετε αυτό, θα χρησιμοποιήσετε το τοστ.επιλογές ιδιοκτησία. Αυτό το αντικείμενο ιδιότητας περιέχει τις ιδιότητες προσαρμογής όλων των ειδοποιήσεων Toastr.

Για παράδειγμα:

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;

Αυτό το παράδειγμα δείχνει πώς να διαμορφώσετε όλες τις ειδοποιήσεις ώστε να έχουν μια γραμμή προόδου, ένα κουμπί κλεισίματος, μια οθόνη στην επάνω δεξιά γωνία γωνία της οθόνης, κλείνει αυτόματα μετά από 5 δευτερόλεπτα και χρησιμοποιεί μεταβάσεις fade-in και fade-out για να εμφανιστεί και εξαφανίζομαι.

Εκτελώντας την εφαρμογή και κάνοντας κλικ στα κουμπιά θα εμφανιστεί μια διεπαφή που θα μοιάζει με την παρακάτω εικόνα.

Κάντε τις ειδοποιήσεις σας διαδραστικές

Μπορείτε να κάνετε τις ειδοποιήσεις σας πιο ελκυστικές προσθέτοντας διαδραστικότητα, όπως τη δυνατότητα να κάνετε κλικ σε αυτές. Για να το κάνετε αυτό, χρησιμοποιείτε το στο κλικ ιδιοκτησία. ο στο κλικ Η ιδιοκτησία είναι μία από τις επιλογές προσαρμογής που παρέχει η βιβλιοθήκη Toastr. Καθορίζει μια λειτουργία που εκτελείται όταν κάνετε κλικ στην ειδοποίηση, παρόμοια με το κλικ συμβάν (ένας από τους ακροατές συμβάντων JavaScript).

Ακολουθεί ένα παράδειγμα του τρόπου χρήσης του στο κλικ ιδιοκτησία:

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;

Στο μπλοκ κώδικα παραπάνω, οι επιλογές είναι αντικείμενο του τοστιέρα.επιτυχία η συνάρτηση περιέχει ένα στο κλικ ιδιοκτησία. ο στο κλικ ιδιοκτησία καλεί το τοστρ.καθαρίζω λειτουργία, η οποία διαγράφει την ειδοποίηση από την οθόνη.

Δημιουργήστε ελκυστικές ειδοποιήσεις χρησιμοποιώντας το Toastr

Εδώ, μάθατε πώς να χρησιμοποιείτε τη βιβλιοθήκη Toastr για τη δημιουργία ελκυστικών ειδοποιήσεων για την εφαρμογή React. Εγκαταστήσατε το Toastr, το ρυθμίσατε στην εφαρμογή σας και δημιουργήσατε και προσαρμόσατε τις ειδοποιήσεις σας. Το Toastr είναι μια ισχυρή βιβλιοθήκη που μπορεί να σας βοηθήσει να δημιουργήσετε ενημερωτικές και οπτικά ελκυστικές ειδοποιήσεις. Εκτός από το Toastr, μπορείτε επίσης να δοκιμάσετε άλλες βιβλιοθήκες όπως το SweetAlert, το React-Toastify ή το Chakra UI.