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

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

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

Για να χρησιμοποιήσετε το SweetAlert βιβλιοθήκη για να δημιουργήσετε ειδοποιήσεις, πρέπει να την εγκαταστήσετε χρησιμοποιώντας οποιονδήποτε διαχειριστή πακέτων της επιλογής σας.

Μπορείτε να το εγκαταστήσετε μέσω του Διαχείριση πακέτων NPM εκτελώντας την ακόλουθη εντολή στο τερματικό σας:

npm εγκατάσταση sweetalert --save

Χρήση του SweetAlert για τη δημιουργία ειδοποιήσεων

Η δημιουργία προσαρμοσμένων ειδοποιήσεων στην εφαρμογή React χρησιμοποιώντας τη βιβλιοθήκη SweetAlert είναι παρόμοια χρησιμοποιώντας τη βιβλιοθήκη Toastify

. ο χελιδόνι Η λειτουργία που παρέχεται από τη βιβλιοθήκη SweetAlert δημιουργεί μια παρουσία του στοιχείου ειδοποίησης και καθορίζει τις ιδιότητες της ειδοποίησης.

Εδώ είναι ένα παράδειγμα χρήσης του swal() λειτουργία για τη δημιουργία ενός στοιχείου ειδοποίησης:

εισαγωγή Αντιδρώ από'αντιδρώ'
εισαγωγή χελιδόνι από'sweetalert'
λειτουργίαApp() {
συνθ ειδοποιώ = () => swal('Γειά σου');
ΕΠΙΣΤΡΟΦΗ (



Κάντε κλικ στο Me</button>
 </div>
 )
}
εξαγωγήΠροκαθορισμένο App

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

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

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

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

εισαγωγή Αντιδρώ από'αντιδρώ'
εισαγωγή χελιδόνι από'sweetalert'
λειτουργίαApp() {
συνθ ειδοποιώ = () => swal('Γειά σου', 'Καλωσήρθατε στη σελίδα μου', 'επιτυχία');
ΕΠΙΣΤΡΟΦΗ (



Κάντε κλικ στο Me</button>
 </div>
 )
}
εξαγωγήΠροκαθορισμένο App

Όταν ο χρήστης κάνει κλικ στο κουμπί, καλεί το κοινοποιώ λειτουργία. Αυτή η λειτουργία θα εμφανίσει στη συνέχεια μια ειδοποίηση με το μήνυμα "Hello There" και "Welcome to my Page" με ένα εικονίδιο επιτυχίας.

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

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

εισαγωγή Αντιδρώ από'αντιδρώ'
εισαγωγή χελιδόνι από'sweetalert'
λειτουργίαApp() {
συνθ ειδοποιώ = () => swal(
 {
 τίτλος: 'Γειά σου',
 κείμενο: 'Καλωσήρθατε στη σελίδα μου',
 εικόνισμα: 'επιτυχία',
 κουμπί: 'ΕΝΤΑΞΕΙ',
 }
 );
ΕΠΙΣΤΡΟΦΗ (



Κάντε κλικ στο Me</button>
 </div>
 )
}
εξαγωγήΠροκαθορισμένο App

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

ο τίτλος ιδιοκτησία προσδιορίζει τον τίτλο της ειδοποίησης, ενώ η κείμενο Η ιδιότητα ορίζει το μήνυμα. Με την εικόνισμα ιδιότητα, μπορείτε να καθορίσετε τον τύπο του εικονιδίου που εμφανίζεται στην ειδοποίηση.

Τέλος, το κουμπί Η ιδιότητα καθορίζει το κείμενο του κουμπιού που εμφανίζεται στην ειδοποίηση. Σε αυτήν την περίπτωση, το κουμπί εμφανίζει το κείμενο Εντάξει.

Προσαρμογή της ιδιότητας του κουμπιού

Μπορείτε να προσαρμόσετε το κουμπί ιδιοκτησία του στοιχείου ειδοποίησής σας για να ταιριάζει στις σχεδιαστικές σας ανάγκες. ο κουμπί Η ιδιότητα παίρνει ένα αντικείμενο με ιδιότητες που χρησιμοποιούνται για τη διαμόρφωση της συμπεριφοράς και της εμφάνισης του κουμπιού.

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

swal(
 {
 κουμπί: {
 κείμενο: "ΕΝΤΑΞΕΙ",
 αξία: αληθής,
 ορατός: αληθής,
 όνομα τάξης: "",
 κλείσιμοModal: αληθής
 },
 }
 );

Στο παραπάνω μπλοκ κώδικα, οι ακόλουθες ιδιότητες χρησιμοποιούνται με το κουμπί:

• κείμενο: Το κείμενο που θα εμφανιστεί στο κουμπί.
• αξία: Η τιμή που επιστρέφεται όταν ο χρήστης κάνει κλικ στο κουμπί. Σε αυτή την περίπτωση, η τιμή είναι αληθής.
• ορατός: Μια δυαδική τιμή υποδεικνύει εάν το κουμπί πρέπει να είναι ορατό.
• όνομα τάξης: Μια συμβολοσειρά που αντιπροσωπεύει την κλάση CSS για εφαρμογή στο κουμπί.
• κλείσιμοModal: Μια δυαδική τιμή που υποδεικνύει εάν το modal θα πρέπει να κλείσει όταν κάνετε κλικ στο κουμπί.

Μπορείτε επίσης να αποδώσετε περισσότερα από ένα κουμπιά χρησιμοποιώντας έναν πίνακα με το κουμπιά ιδιοκτησία. Ο πίνακας θα λάβει συμβολοσειρές ως στοιχεία του.

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

swal(
 {
 κουμπιά: ["Ματαίωση", "Εντάξει"],
 }
 );

Σε αυτό το παράδειγμα, το στοιχείο ειδοποίησής σας θα περιέχει δύο κουμπιά με τα κείμενα Ματαίωση και Εντάξει. Ρύθμιση του κουμπιά ιδιοκτησία σε ψευδής θα αποδώσει μια ειδοποίηση χωρίς κουμπί.

Απόδοση στοιχείων HTML μέσα στο στοιχείο ειδοποίησης

Μπορείτε επίσης να αποδώσετε στοιχεία HTML εκτός από απλές συμβολοσειρές ως ειδοποίηση. Αυτό παρέχει ένα ευρύ φάσμα επιλογών προσαρμογής.

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

εισαγωγή Αντιδρώ από'αντιδρώ'
εισαγωγή χελιδόνι από'sweetalert'
λειτουργίαApp() {
συνθ ειδοποιώ = () => swal(
 {
 περιεχόμενο: {
 στοιχείο: 'εισαγωγή',
 ιδιότητες: {
 σύμβολο κράτησης θέσης: 'Ονομα',
 τύπος: 'κείμενο'
 }
 },
 κουμπιά: 'Εγγραφείτε'
 }
 )
ΕΠΙΣΤΡΟΦΗ (

"εφαρμογή">
Κάντε κλικ στο Me</button>
 </div>
 )
}
εξαγωγήΠροκαθορισμένο App

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

Καθορίζετε το περιεχόμενο της ειδοποίησης χρησιμοποιώντας το περιεχόμενο ιδιότητα και το στοιχείο HTML για απόδοση με το στοιχείο ιδιοκτησία. Για να καθορίσετε τα χαρακτηριστικά του στοιχείου HTML, χρησιμοποιείτε το γνωρίσματα ιδιοκτησία.

Το μπλοκ κώδικα παραπάνω θα αποδώσει την παρακάτω ειδοποίηση όταν κάνετε κλικ στο στοιχείο του κουμπιού.

Στυλ του στοιχείου ειδοποίησης

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

Θα χρησιμοποιήσετε το όνομα τάξης ιδιότητα για να προσθέσετε τα στυλ σας στην ειδοποίηση. ο όνομα τάξης Η ιδιότητα ορίζει μια κλάση CSS για την ειδοποίηση.

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

swal(
 {
 τίτλος: 'Γειά σου',
 κείμενο: 'Καλωσήρθατε στη σελίδα μου',
 κουμπί: ψευδής,
 όνομα τάξης: 'συναγερμός',
 }
 )

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

.συναγερμός{
χρώμα του φόντου: πράσινος;
γραμματοσειρά-οικογένεια: ρέων;
σύνορα-ακτίνα: 15px;
}

Τα παραπάνω στυλ CSS θα ισχύουν για την ειδοποίηση κατά την απόδοση:

Κλείσιμο του στοιχείου ειδοποίησης

Η βιβλιοθήκη SweetAlert παρέχει πολλές επιλογές για να προσαρμόσετε τον τρόπο με τον οποίο κλείνουν οι ειδοποιήσεις σας. Αυτές οι επιλογές είναι οι closeOnEsc, closeOnClickOutside, και μετρών την ώραν ιδιότητες.

ο closeOnEsc Η ιδιότητα καθορίζει εάν το πλαίσιο ειδοποίησης κλείνει όταν ο χρήστης πατήσει το πλήκτρο Esc στο πληκτρολόγιό του. ο closeOnEsc Η ιδιότητα παίρνει μια δυαδική τιμή.

swal(
 {
 ...,
 closeOnEsc: ψευδής,
 }
 )

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

Μπορείτε επίσης να καθορίσετε εάν ο χρήστης μπορεί να κλείσει το πλαίσιο ειδοποιήσεων κάνοντας κλικ έξω από το πλαίσιο χρησιμοποιώντας το closeOnClickOutside ιδιοκτησία.

Εάν η ιδιότητα έχει οριστεί σε αληθής, ο closeOnClickOutside Η ιδιότητα επιτρέπει το κλείσιμο του πλαισίου ειδοποιήσεων κάνοντας κλικ οπουδήποτε έξω από αυτό. Αυτή είναι η προεπιλεγμένη συμπεριφορά του SweetAlert. Για να σταματήσετε αυτήν τη συμπεριφορά, ρυθμίστε το closeOnClickOutside ιδιοκτησία σε ψευδής.

swal(
 {
 ...,
 closeOnClickOutside: ψευδής,
 }
 )

Με την μετρών την ώραν ιδιοκτησία, μπορείτε να ορίσετε ένα χρονικό όριο για να κλείνει αυτόματα το πλαίσιο ειδοποιήσεων. ο μετρών την ώραν Η ιδιότητα παίρνει μια ακέραια τιμή σε χιλιοστά του δευτερολέπτου.

swal(
 {
 ...,
 μετρών την ώραν: 5000,
 }
 )

Σε αυτό το παράδειγμα, το μετρών την ώραν ιδιοκτησία έχει οριστεί σε 5000. Η ειδοποίηση θα είναι ορατή μόνο για 5 δευτερόλεπτα.

Αποτελεσματικές προσαρμοσμένες ειδοποιήσεις με χρήση του SweetAlert

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