כיצד ליצור רכיב התראות מותאם אישית ב-React באמצעות SweetAlert

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

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

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

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

npm התקן sweetalert --שמור

שימוש ב-SweetAlert ליצירת הודעות

יצירת התראות מותאמות אישית באפליקציית React שלך באמצעות ספריית SweetAlert דומה לזה באמצעות ספריית Toastify. ה סוואל הפונקציה המסופקת על ידי ספריית SweetAlert יוצרת מופע של רכיב ההודעות ומגדירה את מאפייני ההודעה.

הנה דוגמה לשימוש ב- swal() פונקציה ליצירת רכיב התראה:

יְבוּא לְהָגִיב מ'לְהָגִיב'
יְבוּא סוואל מ'מתוק'
פוּנקצִיָהאפליקציה() {
const להודיע ​​= () => סוואל('שלום לך');
לַחֲזוֹר (



לחץ על אני</button>
 </div>
 )
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה

לחיצה על הכפתור תקרא ל- סוואל פונקציה, שתציג הודעה עם הודעת "שלום לך".

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

אתה יכול להגדיר את סמל פרמטר לאחד מהערכים המוגדרים מראש, כלומר, הַצלָחָה, אַזהָרָה, שְׁגִיאָה, או מידע. סמל ההודעה יתבסס על הערכים שעברת.

לדוגמה:

יְבוּא לְהָגִיב מ'לְהָגִיב'
יְבוּא סוואל מ'מתוק'
פוּנקצִיָהאפליקציה() {
const להודיע ​​= () => סוואל('שלום לך', 'ברוך הבא לעמוד שלי', 'הַצלָחָה');
לַחֲזוֹר (



לחץ על אני</button>
 </div>
 )
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה

כאשר המשתמש לוחץ על הכפתור, הוא קורא ל- לְהוֹדִיעַ פוּנקצִיָה. לאחר מכן פונקציה זו תציג הודעה עם ההודעה "שלום לך" ו"ברוכים הבאים לדף שלי" עם סמל הצלחה.

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

לדוגמה:

יְבוּא לְהָגִיב מ'לְהָגִיב'
יְבוּא סוואל מ'מתוק'
פוּנקצִיָהאפליקציה() {
const להודיע ​​= () => סוואל(
 {
 כותרת: 'שלום לך',
 טֶקסט: 'ברוך הבא לעמוד שלי',
 סמל: 'הַצלָחָה',
 לַחְצָן: 'בסדר',
 }
 );
לַחֲזוֹר (



לחץ על אני</button>
 </div>
 )
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה

בגוש הקוד למעלה, ה- סוואל הפונקציה לוקחת אובייקט עם המאפיינים הבאים: כותרת, טֶקסט, סמל, ו לַחְצָן.

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

לבסוף, ה לַחְצָן מאפיין מציין את הטקסט של הכפתור המוצג בהודעה. במקרה זה, הכפתור מציג את הטקסט בסדר.

התאמה אישית של מאפיין הכפתור

אתה יכול להתאים אישית את לַחְצָן המאפיין של רכיב ההודעות שלך כדי להתאים לצרכי העיצוב שלך. ה לַחְצָן מאפיין לוקח אובייקט עם מאפיינים המשמשים להגדרת ההתנהגות והמראה של הכפתור.

לחצן ברירת מחדל מכיל את המאפיינים הבאים:

סוואל(
 {
 לחצן: {
 טֶקסט: "בסדר",
 ערך: נָכוֹן,
 גלוי: נָכוֹן,
 שם כיתה: "",
 closeModal: נָכוֹן
 },
 }
 );

בבלוק הקוד למעלה, נעשה שימוש במאפיינים הבאים עם הכפתור:

• טֶקסט: הטקסט שיוצג על הכפתור.
• ערך: הערך שיש להחזיר כאשר המשתמש לוחץ על הלחצן. במקרה זה, הערך הוא נָכוֹן.
• גלוי: ערך בוליאני מציין אם הכפתור צריך להיות גלוי.
• className: מחרוזת המייצגת את מחלקת ה-CSS להחלה על הכפתור.
• closeModal: ערך בוליאני המציין אם יש לסגור את המודאל בעת לחיצה על הכפתור.

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

לדוגמה:

סוואל(
 {
 כפתורים: ["לְבַטֵל", "בסדר"],
 }
 );

בדוגמה זו, רכיב ההודעות שלך יכיל שני לחצנים עם הטקסטים לְבַטֵל ו בסדר. הגדרת ה כפתורים רכוש ל שֶׁקֶר יציג הודעה ללא כפתור.

עיבוד רכיבי HTML בתוך רכיב ההודעות

אתה יכול גם להציג רכיבי HTML מלבד מחרוזות רגילות כהתראה. זה מספק מגוון רחב של אפשרויות התאמה אישית.

לדוגמה:

יְבוּא לְהָגִיב מ'לְהָגִיב'
יְבוּא סוואל מ'מתוק'
פוּנקצִיָהאפליקציה() {
const להודיע ​​= () => סוואל(
 {
 תוכן: {
 אֵלֵמֶנט: 'קֶלֶט',
 מאפיינים: {
 מציין מיקום: 'שם פרטי',
 סוּג: 'טֶקסט'
 }
 },
 כפתורים: 'הירשם'
 }
 )
לַחֲזוֹר (

"אפליקציה">
לחץ על אני</button>
 </div>
 )
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה

בדוגמה זו, אתה משתמש ב- תוֹכֶן מאפיין לעיבוד שדה קלט עם טקסט מציין מיקום.

אתה מציין את תוכן ההודעה באמצעות ה תוֹכֶן מאפיין ורכיב HTML לעיבוד עם ה- אֵלֵמֶנט תכונה. כדי לציין את התכונות של רכיב ה-HTML, אתה משתמש ב- תכונות תכונה.

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

עיצוב רכיב ההודעות

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

אתה תשתמש ב className מאפיין כדי להוסיף את הסגנונות שלך להודעה. ה className המאפיין מגדיר מחלקת CSS עבור ההודעה.

לדוגמה:

סוואל(
 {
 כותרת: 'שלום לך',
 טֶקסט: 'ברוך הבא לעמוד שלי',
 לַחְצָן: שֶׁקֶר,
 שם כיתה: 'עֵרָנִי',
 }
 )

להודעה בגוש הקוד למעלה יש א className ערך עֵרָנִי. לאחר יצירת ההודעה והגדרת ה className, תגדיר את סגנונות ה-CSS שלך:

.עֵרָנִי{
צבע רקע: ירוק;
משפחת גופן: רָהוּט;
רדיוס הגבול: 15פיקסלים;
}

סגנונות ה-CSS שלמעלה יחולו על ההודעה בעיבוד:

סגירת רכיב ההודעות

ספריית SweetAlert מספקת מספר אפשרויות להתאים אישית את אופן סגירת ההתראות שלך. אפשרויות אלו הן ה closeOnEsc, closeOnClickOutside, ו שָׁעוֹן עֶצֶר נכסים.

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

סוואל(
 {
 ...,
 closeOnEsc: שֶׁקֶר,
 }
 )

כברירת מחדל, ה closeOnEsc הנכס מוגדר ל נָכוֹן. בבלוק הקוד למעלה, אתה מגדיר את closeOnEsc רכוש ל שֶׁקֶר. על ידי הגדרת הנכס ל שֶׁקֶר, המשתמש לא יכול לסגור את תיבת ההודעות על ידי לחיצה על מקש Esc.

אתה יכול גם לקבוע אם המשתמש יכול לסגור את תיבת ההודעות על ידי לחיצה מחוץ לתיבה באמצעות closeOnClickOutside תכונה.

אם הנכס מוגדר ל נָכוֹן, ה closeOnClickOutside המאפיין מאפשר את סגירת תיבת ההודעות על ידי לחיצה בכל מקום מחוצה לה. זוהי התנהגות ברירת המחדל של SweetAlert. כדי להפסיק התנהגות זו, הגדר את ה closeOnClickOutside רכוש ל שֶׁקֶר.

סוואל(
 {
 ...,
 closeOnClickOutside: שֶׁקֶר,
 }
 )

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

סוואל(
 {
 ...,
 שָׁעוֹן עֶצֶר: 5000,
 }
 )

בדוגמה זו, ה שָׁעוֹן עֶצֶר הנכס מוגדר ל 5000. ההודעה תהיה גלויה רק ​​למשך 5 שניות.

התראות מותאמות אישית יעילות באמצעות SweetAlert

SweetAlert היא ספרייה רבת עוצמה שבאמצעותה אתה יכול ליצור התראות מותאמות אישית באפליקציית React. באמצעות הספרייה סוואל פונקציה, כעת תוכל לבנות התראות עם מאפיינים והתנהגות מותאמים אישית. אתה יכול גם לעשות שימוש בספריות אחרות כמו React-Toastify כדי ליצור התראות מותאמות אישית באפליקציית React.