בניית התראות מרתקות עם Toastr ב-React

הודעות חיוניות לכל יישום אינטרנט מכיוון שהן מספקות למשתמשים מידע חשוב. במקום לבנות את מערכת ההתראות מאפס, אתה יכול לעשות שימוש בספריות חיצוניות. Toastr היא אחת הספריות הפופולריות ליצירת הודעות ביישומי JavaScript.

התקנת ספריית Toastr

ראשית, התחל ביצירת אפליקציית React שאיתה תעבוד. אתה יכול צור אפליקציית React באמצעות Vite.

לאחר יצירת האפליקציה, התקן את toastr חבילה בפרויקט שלך על ידי הפעלת הפקודה הבאה בטרמינל שלך:

npm install --save toastr

כעת התקנת את ה toastr חבילה ויכול להשתמש בה כדי להציג התראות.

יצירת הודעות באמצעות Toastr

כדי ליצור את ההתראות, תשתמש ב- toastr פוּנקצִיָה. ה toastr הפונקציה משמשת ליצירה והצגת הודעות טוסט. לפני יצירת ההתראות שלך, ודא שאתה מייבא את toastr סגנונות הודעות בקובץ ה-CSS שלך.

@import'toastr';

הנה דוגמה לאופן שבו אתה יוצר הודעה באמצעות ה 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;

בדוגמה זו, אתה מגדיר א לְהוֹדִיעַ פוּנקצִיָה. ה לחץ עלי כפתור קורא ל לְהוֹדִיעַ פונקציה כאשר אתה לוחץ עליו. ה לְהוֹדִיעַ הפונקציה משתמשת ב- toastr.success פונקציה להצגת הודעת הצלחה.

ה toastr.success הפונקציה לוקחת שני ארגומנטים. הארגומנט הראשון הוא הודעת ההתראה שבמקרה זה היא המחרוזת "זה נחמד שאתה כאן". הטיעון השני הוא כותרת ההודעה, "ברוך הבא".

הודעה דומה לתמונה הבאה תופיע כאשר תלחץ על לחץ עלי לַחְצָן.

בנוסף ל toastr.success פונקציה, ה toastr אובייקט מספק פונקציות אחרות ליצירת הודעות. הפונקציות האחרות הן ה toastr.error, toastr.אזהרה, ו toastr.info. כל פונקציה יוצרת התראה עם צבע רקע וסמל שונים, כך שתוכל להבחין בקלות בין סוגים שונים של התראות.

לדוגמה, כאשר אתה משתמש ב- toastr.error פונקציה, ההתראה שלך תיראה כך:

התאמה אישית של ההתראות שלך

עם ספריית Toastr, אתה לא יכול להתאים אישית את ההתראות שלך באמצעות CSS מסורתי, בניגוד כאשר עובדים עם React-Toastify. עם זאת, Toastr עדיין מספק אפשרויות אחרות להתאמה אישית של התראות. אתה יכול להשתמש באפשרויות אלה כדי להתאים אישית את המיקום, המראה והפונקציונליות של ההתראות שלך. אתה צריך להעביר את האפשרויות לארגומנט השלישי של ה 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;

כדי להתאים אישית את ההודעה, קוד זה משתמש ב- כפתור close, סרגל התקדמות, פסק זמן, positionClass, showMethod, ו hidemethod מאפיינים של אובייקט האפשרויות. ה כפתור close המאפיין קובע אם ההודעה שלך תוצג עם לחצן סגירה. הוא מקבל ערך בוליאני.

משתמש ב סרגל התקדמות מאפיין, אתה יכול להוסיף סרגל התקדמות להודעה. הגדרת ה פסק זמן מאפיין מאפשר לך לשלוט בכמה זמן תוצג הודעה. מאפיין זה מציין את מספר האלפיות השניות לפני שההודעה תיעלם אוטומטית.

ה positionClass מאפיין מגדיר את מיקום ההודעה על המסך שלך. הוא מקבל שמונה ערכים מוגדרים מראש. הערכים כוללים:

• טוסט-למעלה-ימין: מציג את ההתראה בפינה השמאלית העליונה של המסך.
• טוסט-למעלה-שמאל: ההודעה תוצג בפינה השמאלית העליונה של המסך.
• טוסט-למעלה-מרכז: ההודעה תופיע במרכז העליון של המסך שלך.
• טוסט-תחתון-ימין: אתה תראה את ההודעה בפינה השמאלית התחתונה של המסך שלך.
• טוסט-תחתון-שמאל: ההודעה ממוקמת בפינה השמאלית התחתונה של המסך.
• טוסט-תחתית-מרכז: אתה תמצא את ההודעה במרכז התחתון של המסך.
• טוסט-טופ-ברוחב מלא: ההודעה מופיעה בחלק העליון של המסך שלך, וממלאת את כל רוחב המסך.
• טוסט-תחתית-ברוחב מלא: ההודעה ממלאת את כל רוחב המסך שלך ומוצגת בתחתית.

לבסוף, ה showMethod ו hidemethod מאפיינים שולטים בהנפשות להצגה והסתרה של ההתראה. ה showMethod מאפיין מציין את האנימציה המשמשת להצגת הודעה, בעוד ש- hidemethod מאפיין מציין את האנימציה המשמשת להסתרת הודעה.

ההודעה המוגדרת בגוש הקוד למעלה תופיע במרכז העליון של המסך שלך, עם סרגל התקדמות וכפתור סגירה. הוא ייעלם לאחר שלוש שניות וישתמש במעברי דהייה ודעיכה כדי להופיע ולהיעלם.

זה ייראה משהו כזה.

שים לב שאתה יכול להתאים אישית כל הודעת Toastr עם אובייקט אפשרויות בודד במקום להתאים אותן אחת בכל פעם. כדי לעשות זאת, תשתמש ב- toastr.options תכונה. אובייקט מאפיין זה מכיל את מאפייני ההתאמה האישית של כל הודעות ה-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 שניות, והשתמש במעברי דהייה ודעיכה כדי להופיע לְהֵעָלֵם.

הפעלת האפליקציה ולחיצה על הכפתורים תציג ממשק שייראה כמו התמונה למטה.

הפוך את ההתראות שלך לאינטראקטיביות

אתה יכול להפוך את ההתראות שלך למושכות יותר על ידי הוספת אינטראקטיביות, כגון היכולת ללחוץ עליהן. כדי לעשות זאת, אתה משתמש ב- בלחיצה תכונה. ה בלחיצה נכס הוא אחת מאפשרויות ההתאמה האישית שספריית 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.success הפונקציה מכילה an בלחיצה תכונה. ה בלחיצה רכוש קורא את toastr.clear פונקציה, אשר מנקה את ההודעה מהמסך.

צור התראות מרתקות באמצעות Toastr

כאן, למדת כיצד להשתמש בספריית Toastr כדי לבנות התראות מרתקות עבור אפליקציית React שלך. התקנת את Toastr, הגדרת אותו באפליקציה שלך ויצרת והתאמת אישית את ההתראות שלך. Toastr היא ספרייה רבת עוצמה שיכולה לעזור לך ליצור התראות אינפורמטיביות ומושכות חזותית. מלבד Toastr, אתה יכול גם לנסות ספריות אחרות כמו SweetAlert, React-Toastify או Chakra UI.