אינך צריך להסתמך על חבילת צד שלישי כדי ליצור רכיב התראה. הנה איך אתה יכול לבנות את זה בעצמך.

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

הגדרת הפרויקט

אתה השתמש ב-Vite כדי להגדיר את אפליקציית React. Vite הוא כלי בנייה המאפשר לך פיגום במהירות פרויקט React.

כדי להתחיל, השתמש במנהל חבילות החוטים כדי ליצור פרויקט Vite חדש על ידי הפעלת הפקודה למטה.

חוט ליצור vite

הפקודה תבקש ממך להזין שם פרויקט. הזן את שם הפרויקט והקש Enter. לאחר מכן, הוא ינחה אותך לבחור מסגרת. בחר לְהָגִיב והקש Enter. לבסוף, הוא יבקש ממך לבחור גרסה, בחר JavaScript ולאחר מכן הקש Enter.

להלן התצורות שהמדריך הזה ישתמש:

לאחר Vite יוצר את הפרויקט, נווט אל תיקיית הפרויקט ופתח אותה באמצעות עורך קוד.

לאחר מכן תוכל להפעיל את שרת הפיתוח על ידי הפעלת הפקודה הבאה.

מפתח חוט

פעולה זו תפתח את אפליקציית React החדשה שלך בדפדפן ברירת המחדל שלך ב- http://localhost: 5173/.

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

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

instagram viewer

להלן וריאציות שונות שרכיב ההודעות אמור להיות מסוגל להציג.

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

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

בתוך ה src תיקיה, צור קובץ חדש בשם Notification.jsx והוסיפו את הקוד הבא.

יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָההוֹדָעָה({סוג, כותרת, תיאור}) {
לַחֲזוֹר (


 {/* תוכן הודעות */}
 </div>
 )
}

קוד זה יוצר רכיב פונקציונלי הנקרא הוֹדָעָה עם שלושה אביזרים: סוּג, כותרת, ו תיאור. אתה תשתמש באביזרים האלה כדי להתאים אישית את הסגנון והתוכן של ההודעה.

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

חוט להוסיף אייקוני תגובה

לאחר מכן ייבא את הסמלים בחלק העליון של הוֹדָעָה רְכִיב.

יְבוּא { RxCross2, RxInfoCircled } מ"react-icons/rx"

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

יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָההוֹדָעָה({סוג, כותרת, תיאור}) {
לַחֲזוֹר (







{title}</div>
{description}</div>
 </div>
 </div>

 </div>
 )
}

השלב הבא הוא לסגנן אותו בהתאם לסוג המועבר.

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

כדי להתחיל, צור קובץ חדש בשם notification.css ולייבא אותו פנימה Notification.jsx על ידי הוספת הקוד הבא בראש.

ייבוא ​​"./notification.css"

ואז פנימה notification.css הגדר את סגנונות הבסיס עבור רכיב ההודעות:

.הוֹדָעָה {
לְהַצִיג: לְהַגמִישׁ;
כיוון הגמיש: שׁוּרָה;
align-items: flex-start;
ריפוד: 8פיקסלים;
}
.notification__left {
לְהַצִיג: לְהַגמִישׁ;
כיוון הגמיש: שׁוּרָה;
ריפוד: 0פיקסלים;
פער: 8פיקסלים;
שוליים-ימין: 24פיקסלים;
}
‎.notification__content {
לְהַצִיג: לְהַגמִישׁ;
כיוון הגמיש: טור;
align-items: flex-start;
ריפוד: 0פיקסלים;
}
.notification__title {
משפחת גופן: "בֵּין";
סיגנון גופן: נוֹרמָלִי;
משקל גופן: 500;
גודל גופן: 14פיקסלים;
}
.notification__description {
משפחת גופן: "בֵּין";
סיגנון גופן: נוֹרמָלִי;
משקל גופן: 400;
גודל גופן: 12פיקסלים;
ריפוד: 0;
}

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

.notification__success {
רקע כללי: #f6fef9;
גבול: 1פיקסליםמוצק#2f9461;
גבול-רדיוס: 8פיקסלים;
}
.notification__error {
רקע כללי: #fffbfa;
גבול: 1פיקסליםמוצק#cd3636;
גבול-רדיוס: 8פיקסלים;
}
.notification__ אזהרה {
רקע כללי: #fffcf5;
גבול: 1פיקסליםמוצק#c8811a;
גבול-רדיוס: 8פיקסלים;
}

הקוד שלמעלה מעצב את מיכל ההודעות על סמך הסוג המועבר.

כדי להתאים אישית את הכותרת, השתמש בסגנונות הבאים.

.notification__title__success {
צֶבַע: #2f9461;
}
אזהרה .notification__title__ {
צֶבַע: #c8811a;
}
.notification__title__error {
צֶבַע: #cd3636;
}

עבור טקסט התיאור המותאם אישית, השתמש בסגנונות אלה.

.notification__description__success {
צֶבַע: #53b483;
}
.notification__description__ אזהרה {
צֶבַע: #e9a23b;
}
.notification__description__error {
צֶבַע: #f34141;
}

ולגבי הסמלים, השתמש במחלקות הבאות.

.notification_icon_error {
צֶבַע: #cd3636;
}
.notification__icon__success {
צֶבַע: #2f9461;
}
.notification__icon__ אזהרה {
צֶבַע: #c8811a;
}

לאחר מכן, ב- הוֹדָעָה רכיב, אתה יכול להחיל על תנאי את המחלקה המתאימה בהתבסס על סוּג prop, ככה:

יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָההוֹדָעָה({סוג, כותרת, תיאור}) {
לַחֲזוֹר (
`הודעה הודעה__${type}`}>
'הודעה__שמאלה'}>
`הודעה__סמל__${type}`}/>
"הודעה__תוכן">
`הודעה__כותרת התראה__כותרת__${type}`}>{title}</div>
`הודעה__description notification__description__${type}`}>{description}</div>
 </div>
 </div>
`הודעה__סמל__${type}`}/>
 </div>
 )
}

ברכיב זה, אתה מגדיר באופן דינמי את המחלקה בהתאם לסוג כגון הודעה__הצלחה אוֹ notification__error.

כדי לראות זאת בפעולה, ייבא את רכיב ההודעות פנימה App.jsx והשתמש בו באופן הבא:

יְבוּא הוֹדָעָה מ'./הוֹדָעָה'
פוּנקצִיָהאפליקציה() {
לַחֲזוֹר (
 <>
 סוג="הַצלָחָה"
 כותרת="משימה הושלמה"
 תיאור="המשימה שלך הושלמה בהצלחה."
 />
 </>
 )
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה

כעת, אתה יכול להעביר סוג אחר ל- הוֹדָעָה רכיב ולספק הודעה מתאימה התואמת את ההודעה.

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

הוספת אינטראקטיביות לרכיב ההודעות

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