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

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

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

התקנת React Toastify

כדי להתקין את Toastify בפרויקט React שלך, הפעל את הפקודה הזו בספריית הפרויקט שלך:

npm install --save react-toastify

הגדרת Toastify

כדי להשתמש בחבילת Toastify, תצטרך לייבא את ToastContainer, הרמת כוסית שיטה, וקובץ CSS הנלווה שסופק על ידי החבילה.

ה ToastContainer בתוך רכיב האפליקציה מאחסן את כל התראות הטוסט שנוצרו.

יְבוּא { ToastContainer, טוסט } מ"להגיב-להרים";
יְבוּא'react-toastify/dist/ReactToastify.css';
פוּנקצִיָהאפליקציה() {
לַחֲזוֹר(



 </div>
 );
}

אתה יכול להשתמש ב הרמת כוסית שיטות ליצירת הודעות טוסט עבור פרויקט React שלך:

פוּנקצִיָהאפליקציה() {
const להודיע ​​= () => toast.success("שלום לך!");
לַחֲזוֹר(


הודע</button>

 </div>
 );
}

לחיצה על הכפתור שקוד זה יוצר תקרא ל- טוסט.הצלחה השיטה, מעבירים לה את ה"שלום לך!" חוּט. פעולה זו תיצור הודעת טוסט שמציגה את ההודעה על המסך, כך:

שים לב שיש סוגים שונים של שיטות טוסט שאתה יכול לקרוא להם, כגון toast.info(), toast.error(), toast.success(), toast.warning(). לכל אחת מהשיטות הללו יש עיצוב צבע עדין כדי לשקף את סוג המסר.

מיקום הודעות הטוסט שלך

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

לדוגמה:

פוּנקצִיָהאפליקציה() {
const להודיע ​​= () => toast.success("שלום לך!");
לַחֲזוֹר(


הודע</button>
"שמאלי עליון"/>
 </div>
 );
}

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

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

פוּנקצִיָהאפליקציה() {
const להודיע ​​= () => toast.success("שלום לך!", {עמדה: הרמת כוסית. POSITION.TOP_CENTER});
לַחֲזוֹר(


הודע</button>
"שמאלי עליון"/>
 </div>
 );
}

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

טיפול ב-autoClose Prop של שיטת הטוסט ומכל הטוסט

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

כדי לשנות את זמן ההשהיה עבור כל התראות הטוסט, השתמש ב- סגירה אוטומטית תמיכה בתוך ToastContainer אֵלֵמֶנט.

לדוגמה:

פוּנקצִיָהאפליקציה() {
const להודיע ​​= () => toast.success("שלום לך!");
לַחֲזוֹר(


הודע</button>
5000}/>
 </div>
 );
}

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

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

לדוגמה:

פוּנקצִיָהאפליקציה() {
const notifyOne = () => toast.info("ייסגר בעוד 10 שניות", {סגירה אוטומטית: 10000});
const notifyTwo = () => toast.info("ייסגר בעוד 15 שניות", {סגירה אוטומטית: 15000});
לַחֲזוֹר (


הודע לאחד</button>
הודע לשני</button>

 </div>
 );
}

כדי למנוע את סגירת הודעת הטוסט כברירת מחדל, אתה יכול להגדיר את סגירה אוטומטית תמך ל שֶׁקֶר. אתה יכול להבטיח שהמשתמש חייב לסגור ידנית כל הודעת טוסט על ידי הגדרת ה- סגירה אוטומטית אבזר של ה ToastContainer לשווא.

לדוגמה:

פוּנקצִיָהאפליקציה() {
const להודיע ​​= () => toast.info("שלום לך!");
לַחֲזוֹר (


הודע</button>
שֶׁקֶר} />
 </div>
 );
}

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

עיבוד הודעות ללא מחרוזת עם Toastify

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

לדוגמה:

פוּנקצִיָההוֹדָעָה({toastProps, closeToast}) {
לַחֲזוֹר (


ברוך הבא {toastProps.position}</p>
</button>
 </div>
 )
}
יְצוּאבְּרִירַת מֶחדָל הוֹדָעָה;

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

ייבא את רכיב ה-Message, ולאחר מכן העביר אותו לפונקציה toast() תוך עיבוד שלו כהודעת טוסט:

יְבוּא { ToastContainer, טוסט } מ"להגיב-להרים";
יְבוּא'react-toastify/dist/ReactToastify.css';
יְבוּא הוֹדָעָה מ"./components/Message";
פוּנקצִיָהאפליקציה() {
const msg = () => הרמת כוסית(<הוֹדָעָה />);
לַחֲזוֹר (


ברוך הבא</button>

 </div>
 );
}

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

הודעות טוסט סטיילינג

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

כדי לעצב את התראת הטוסט שלך, תן לה א className ו החל את ההתאמות האישיות בתוך קובץ CSS.

לדוגמה:

פוּנקצִיָהאפליקציה() {
const להודיע ​​= () => toast.success("שלום לך!", {className: "הודעה-טוסט"});
לַחֲזוֹר (


הודע</button>
"מרכז עליון" />
 </div>
 );
}

עם ה className המצורף להתראה שלך, אתה יכול לעצב את הודעת הטוסט לפי העדפתך בתוך קובץ ה-CSS:

.טוסט-הודעה {
צבע רקע: #000000;
צֶבַע: #FFFFFF;
גודל גופן: 20פיקסלים;
ריפוד: 1rem 0.5 רמ;
}

כתוצאה מהסגנון המותאם אישית לעיל, ההודעה תיראה כך:

הודעות טוסט עבור יישום האינטרנט שלך

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

React-Toastify מציעה שיטה מהירה ויעילה לכלול התראות מותאמות אישית בפרויקט React שלך ללא מהומה.