Πώς να δημιουργήσετε προσαρμοσμένες ειδοποιήσεις στο React χρησιμοποιώντας το React-Toastify

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

Υπάρχουν μερικά δημοφιλή πακέτα και πλαίσια για τη δημιουργία μηνυμάτων ειδοποίησης στο React. Το React-Toastify είναι μια βιβλιοθήκη React που σας επιτρέπει να προσθέτετε ειδοποιήσεις και μηνύματα ειδοποίησης στις εφαρμογές σας.

Εγκατάσταση του React Toastify

Για να εγκαταστήσετε το Toastify στο έργο React, εκτελέστε αυτήν την εντολή στον κατάλογο του έργου σας:

npm install --save react-toastify

Ρύθμιση Toastify

Για να χρησιμοποιήσετε το πακέτο Toastify, θα χρειαστεί να εισαγάγετε το Toast Container, τοστ μέθοδο και το συνοδευτικό αρχείο CSS που παρέχεται από το πακέτο.

ο Toast Container μέσα στο στοιχείο της εφαρμογής αποθηκεύονται όλες οι ειδοποιήσεις τοστ που έχουν δημιουργηθεί.

εισαγωγή { Toast Container, toast } από«αντιδρώ-φρυγανίζω»;
εισαγωγή'react-toastify/dist/ReactToastify.css';
λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ(



 </div>
 );
}

Μπορείτε να χρησιμοποιήσετε το τοστ μέθοδοι για τη δημιουργία ειδοποιήσεων τοστ για το έργο React:

λειτουργίαApp() {
συνθ ειδοποιώ = () => τοστ.επιτυχία("Γειά σου!");
ΕΠΙΣΤΡΟΦΗ(


Ειδοποίηση</button>

 </div>
 );
}

Κάνοντας κλικ στο κουμπί που δημιουργεί αυτός ο κωδικός θα καλέσετε το τοστ.επιτυχία μέθοδο, περνώντας το "Hello There!" σειρά. Αυτό θα δημιουργήσει μια ειδοποίηση τοστ που εμφανίζει το μήνυμα στην οθόνη, ως εξής:

Σημειώστε ότι υπάρχουν διαφορετικοί τύποι μεθόδων τοστ που μπορείτε να καλέσετε, όπως π.χ toast.info(), toast.error(), toast.success(), τοστ.warning(). Κάθε μία από αυτές τις μεθόδους έχει κάποιο λεπτό χρωματικό στυλ για να αντικατοπτρίζει τον τύπο του μηνύματος.

Τοποθέτηση των ειδοποιήσεων τοστ σας

Από προεπιλογή, οι ειδοποιήσεις τοστ εμφανίζονται στην επάνω δεξιά πλευρά της οθόνης της εφαρμογής Ιστού. Μπορείτε να το αλλάξετε αυτό ορίζοντας την ιδιότητα θέση στο Toast Container. Υπάρχουν έξι διαθέσιμες τιμές θέσης: πάνω δεξιά, πάνω-κέντρο, πάνω-αριστερά, κάτω-δεξιά, κάτω-κέντρο και κάτω-αριστερά.

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

λειτουργίαApp() {
συνθ ειδοποιώ = () => τοστ.επιτυχία("Γειά σου!");
ΕΠΙΣΤΡΟΦΗ(


Ειδοποίηση</button>
"πάνω αριστερά"/>
 </div>
 );
}

Ρύθμιση του στηρίγματος θέσης στο Toast Container επάνω αριστερά διασφαλίζει ότι όλες οι ειδοποιήσεις τοστ εμφανίζονται από την επάνω αριστερή πλευρά της οθόνης.

Μπορείτε να αλλάξετε την προεπιλεγμένη θέση για μεμονωμένες ειδοποιήσεις τοστ χρησιμοποιώντας το στηρίγμα θέσης του τοστ μέθοδοι:

λειτουργίαApp() {
συνθ ειδοποιώ = () => τοστ.επιτυχία("Γειά σου!", {θέση: τοστ. POSITION.TOP_CENTER});
ΕΠΙΣΤΡΟΦΗ(


Ειδοποίηση</button>
"πάνω αριστερά"/>
 </div>
 );
}

Μπορείτε επίσης να τοποθετήσετε τις ειδοποιήσεις Toast χρησιμοποιώντας την ιδιότητα θέσης CSS, αλλά το στήριγμα θέσης του Toastify είναι ο τυπικός τρόπος για να γίνει αυτό.

Χειρισμός του autoClose Prop της μεθόδου Toast και του ToastContainer

Μπορείτε να αλλάξετε τον χρόνο εμφάνισης των ειδοποιήσεων τοστ. Μπορείτε να ελέγξετε πόσο καιρό μια ειδοποίηση τοστ παραμένει ανοιχτή χρησιμοποιώντας το Αυτόματο Κλείσιμο στήριγμα. Μπορείτε να αλλάξετε τον χρόνο καθυστέρησης για όλες τις ειδοποιήσεις τοστ και τις ειδοποιήσεις για τοστ για κάθε άτομο. ο Αυτόματο Κλείσιμο Το prop δέχεται μόνο τη δυαδική τιμή false ή μια διάρκεια σε χιλιοστά του δευτερολέπτου.

Για να αλλάξετε τον χρόνο καθυστέρησης για όλες τις ειδοποιήσεις τοστ, χρησιμοποιήστε το Αυτόματο Κλείσιμο στήριγμα μέσα στο Toast Container στοιχείο.

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

λειτουργίαApp() {
συνθ ειδοποιώ = () => τοστ.επιτυχία("Γειά σου!");
ΕΠΙΣΤΡΟΦΗ(


Ειδοποίηση</button>
5000}/>
 </div>
 );
}

Με τις παραπάνω ρυθμίσεις, όλες οι ειδοποιήσεις τοστ θα εμφανίζονται για ακριβώς πέντε δευτερόλεπτα (5.000 χιλιοστά του δευτερολέπτου).

Χρησιμοποιώντας την Αυτόματο Κλείσιμο ιδιοκτησία του καθενός τοστ μέθοδο, μπορείτε να προσαρμόσετε τον χρόνο καθυστέρησης για μεμονωμένες ειδοποιήσεις τοστ.

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

λειτουργίαApp() {
συνθ notifyOne = () => toast.info("Θα κλείσει σε 10 δευτερόλεπτα", {Αυτόματο Κλείσιμο: 10000});
συνθ notifyTwo = () => toast.info("Θα κλείσει σε 15 δευτερόλεπτα", {Αυτόματο Κλείσιμο: 15000});
ΕΠΙΣΤΡΟΦΗ (


Notify One</button>
Ειδοποίηση δύο</button>

 </div>
 );
}

Για να αποτρέψετε το κλείσιμο της ειδοποίησης τοστ από προεπιλογή, μπορείτε να ορίσετε το Αυτόματο Κλείσιμο στήριγμα σε ψευδής. Μπορείτε να βεβαιωθείτε ότι ο χρήστης πρέπει να κλείσει χειροκίνητα κάθε ειδοποίηση τοστ, ρυθμίζοντας το Αυτόματο Κλείσιμο στήριγμα του Toast Container σε ψεύτικο.

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

λειτουργίαApp() {
συνθ ειδοποιώ = () => toast.info("Γειά σου!");
ΕΠΙΣΤΡΟΦΗ (


Ειδοποίηση</button>
ψευδής} />
 </div>
 );
}

Ρύθμιση του Αυτόματο Κλείσιμο στήριγμα του ατόμου τοστ μεθόδους για να ψευδής θα διασφαλίσει επίσης ότι αυτές οι συγκεκριμένες ειδοποιήσεις τοστ δεν κλείνουν από προεπιλογή.

Απόδοση ειδοποιήσεων χωρίς συμβολοσειρά με το Toastify

Μπορείτε να αποδώσετε συμβολοσειρές, στοιχεία αντίδρασης και αριθμούς ως μηνύματα ειδοποίησης όταν εργάζεστε με ειδοποιήσεις τοστ. Για να αποδώσετε ένα στοιχείο React ως ειδοποίηση τοστ, δημιουργείτε το στοιχείο και το αποδίδετε χρησιμοποιώντας α τοστ μέθοδος.

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

λειτουργίαΜήνυμα({toastProps, closeToast}) {
ΕΠΙΣΤΡΟΦΗ (


Καλώς ορίσατε {toastProps.position}</p>
</button>
 </div>
 )
}
εξαγωγήΠροκαθορισμένο Μήνυμα;

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

Εισαγάγετε το στοιχείο Message και, στη συνέχεια, περάστε το στη συνάρτηση toast(), αποδίδοντάς το ως ειδοποίηση τοστ:

εισαγωγή { Toast Container, toast } από«αντιδρώ-φρυγανίζω»;
εισαγωγή'react-toastify/dist/ReactToastify.css';
εισαγωγή Μήνυμα από"./components/Μήνυμα";
λειτουργίαApp() {
συνθ msg = () => τοστ(<Μήνυμα />);
ΕΠΙΣΤΡΟΦΗ (


Καλώς ορίσατε</button>

 </div>
 );
}

Κάνοντας κλικ στο κουμπί θα εμφανιστεί στην οθόνη σας μια ειδοποίηση που περιέχει μια ερώτηση και δύο κουμπιά.

Styling Toast Ειδοποιήσεις

Δεν χρειάζεται να χρησιμοποιήσετε το προεπιλεγμένο στυλ για τις ειδοποιήσεις τοστ. Μπορείτε να τα προσαρμόσετε ώστε να ταιριάζουν με ένα επιθυμητό θέμα σχεδίασης ή μοτίβο που ταιριάζει στην εφαρμογή Ιστού σας.

Για να διαμορφώσετε την ειδοποίηση τοστ σας, δώστε της ένα όνομα τάξης και εφαρμόστε τις προσαρμογές σε ένα αρχείο CSS.

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

λειτουργίαApp() {
συνθ ειδοποιώ = () => τοστ.επιτυχία("Γειά σου!", {όνομα τάξης: "τοστ-μήνυμα"});
ΕΠΙΣΤΡΟΦΗ (


Ειδοποίηση</button>
"κορυφαίο κέντρο" />
 </div>
 );
}

Με την όνομα τάξης που επισυνάπτεται στην ειδοποίησή σας, μπορείτε να διαμορφώσετε την ειδοποίηση τοστ σύμφωνα με τις προτιμήσεις σας μέσα στο αρχείο CSS:

.τοστ-μήνυμα {
χρώμα του φόντου: #000000;
χρώμα: #FFFFFF;
μέγεθος γραμματοσειράς: 20px;
υλικό παραγεμίσματος: 1rem 0.5 εκμ;
}

Ως αποτέλεσμα του παραπάνω προσαρμοσμένου στυλ, η ειδοποίηση θα μοιάζει με αυτό:

Ειδοποιήσεις τοστ για την εφαρμογή Ιστού σας

Τώρα μπορείτε να δημιουργήσετε προσαρμοσμένες ειδοποιήσεις στο React χρησιμοποιώντας το πακέτο React-Toastify και τις διαθέσιμες μεθόδους του. Προσαρμόζοντας αυτές τις προσαρμοσμένες ειδοποιήσεις/ειδοποιήσεις σύμφωνα με τις προτιμήσεις σας, μπορείτε να βελτιώσετε την εμπειρία χρήστη της εφαρμογής Ιστού σας.

Το React-Toastify προσφέρει μια γρήγορη και αποτελεσματική μέθοδο για να συμπεριλάβετε προσαρμοσμένες ειδοποιήσεις στο έργο σας React χωρίς φασαρία.