חלונות קופצים הם דרך מצוינת למשוך את תשומת הלב של המשתמש שלך ולהציג מידע חשוב. אתה יכול להשתמש בהם עבור דברים כמו הודעות אישור והודעות שגיאה. או שאתה יכול פשוט להשתמש בהם כדי להציג מידע נוסף על אלמנט בדף.
ב-React, ישנן שתי דרכים ליצור חלונות קופצים: שימוש ב-react hooks או שימוש במודול חיצוני.
כיצד ליצור חלונות קופצים ב-React.js
ראשון, ליצור אפליקציית תגובה פשוטה. לאחר מכן, תוכל להוסיף חלון קופץ באחת משתי השיטות. אתה יכול להשתמש בווי React או במודול חיצוני.
1. שימוש ב-React Hooks
גישת ה-hooks פשוטה יותר ודורשת רק כמה שורות קוד.
ראשית, עליך ליצור פונקציה שתפתח את החלון הקופץ. אתה יכול להגדיר פונקציה זו ברכיב שיציג את החלון הקופץ.
לאחר מכן, עליך להשתמש ב-useState hook כדי ליצור משתנה מצב עבור החלון הקופץ. אתה יכול להשתמש במשתנה המצב הזה כדי לקבוע אם החלון הקופץ צריך להיות פתוח או לא.
לבסוף, עליך להוסיף כפתור לרכיב שלך שיפעיל את החלון הקופץ. כאשר תלחץ על כפתור זה, הגדר את משתנה המצב ל-true, מה שיגרום להופעת החלון הקופץ.
תסתכל על הקוד של גישה זו:
יְבוּא תגובה, { useState } מ 'לְהָגִיב';פוּנקצִיָהדוגמא() {
const [isOpen, setIsOpen] = useState(שֶׁקֶר);לַחֲזוֹר (
<div>
<לחצן onClick={() => setIsOpen (true)}>
פתח פופ-אפ
</button>{פתוח && (
<div>
<div>
זֶה הוא תוכן החלון הקופץ.
</div>
<לחצן onClick={() => setIsOpen (false)}>
סגור חלון קופץ
</button>
</div>
)}
</div>
);
}
יְצוּאבְּרִירַת מֶחדָל דוגמא;
ראשית, קוד זה מייבא את ה-useState hook מספריית התגובה הליבה. לאחר מכן, הפונקציה לדוגמה משתמשת ב- useState hook כדי ליצור משתנה מצב בשם isOpen. משתנה מצב זה קובע אם החלון הקופץ צריך להיות פתוח או לא.
לאחר מכן, הוסף כפתור לרכיב שיפעיל את החלון הקופץ. כאשר תלחץ על כפתור זה, משתנה המצב יוגדר כ-true, מה שיגרום להופעת החלון הקופץ.
לבסוף, הוסף כפתור לרכיב שיסגור את החלון הקופץ. כאשר תלחץ על כפתור זה, משתנה המצב יוגדר כ-false, מה שיגרום לחלון המוקפץ להיעלם.
2. שימוש במודול חיצוני
אתה יכול גם ליצור חלונות קופצים ב-React באמצעות מודול חיצוני. ישנם מודולים רבים זמינים שבהם אתה יכול להשתמש למטרה זו.
מודול פופולרי אחד הוא תגובה-מודאלית. react-modal הוא מודול פשוט וקל משקל המאפשר לך ליצור דיאלוגים מודאליים ב-React.
כדי להשתמש ב-react-modal, תחילה עליך להתקין אותו באמצעות npm:
npm להתקין תגובה-מודאליתלאחר שהתקנת את react-modal, תוכל לייבא אותו לרכיב React שלך:
יְבוּא ReactModal מ 'react-modal';
יְבוּא תגובה, { useState } מ 'לְהָגִיב';פוּנקצִיָהדוגמא() {
const [isOpen, setIsOpen] = useState(שֶׁקֶר);לַחֲזוֹר (
<div>
<button onClick={setIsOpen}>פתח מודאל</button>
<ReactModal
isOpen={isOpen}
contentLabel="דוגמה מודאלית"
>
זֶה הוא התוכן של המודאל.
</ReactModal>
</div>
);
}
יְצוּאבְּרִירַת מֶחדָל דוגמא;
בקוד זה, אתה עדיין משתמש ב-react hooks אבל עם מודול react-modal. עם מודול ה-react-modal, אתה יכול להוסיף עוד פונקציונליות לחלון הקופץ. כפי שאתה יכול לראות, הקוד דומה מאוד לגישה הקודמת. ההבדל היחיד הוא שאתה משתמש כעת ברכיב ReactModal מ-react-modal במקום ליצור משלך.
ראשית, עליך לייבא את מודול ה-react-modal. לאחר מכן, אתה משתמש ברכיב ReactModal כדי לעטוף את התוכן של החלון הקופץ שלך. השתמש באבזר isOpen כדי לקבוע אם המודאל צריך להיות פתוח או לא.
לאחר שיצרת את החלון הקופץ שלך, ייתכן שתרצה להוסיף לו תכונות נוספות. לדוגמה, ייתכן שתרצה לסגור את החלון הקופץ כאשר המשתמש לוחץ מחוץ לו.
כדי לעשות זאת, עליך להשתמש באבזר onRequestClose של הרכיב react-modal. אביזר זה לוקח פונקציה כערך שלה. פונקציה זו תפעל כאשר המשתמש ילחץ מחוץ למודאל.
לדוגמה, כדי לסגור את החלון הקופץ כאשר המשתמש לוחץ מחוץ לו, תשתמש בקוד הבא:
יְבוּא תגובה, { useState } מ 'לְהָגִיב';
יְבוּא ReactModal מ 'react-modal';פוּנקצִיָהדוגמא() {
const [isOpen, setIsOpen] = useState(שֶׁקֶר);לַחֲזוֹר (
<div>
<לחצן onClick={() => setIsOpen (true)}>
פתח מודאל
</button>
<ReactModal
isOpen={isOpen}
contentLabel="דוגמה מודאלית"
onRequestClose={() => setIsOpen(שֶׁקֶר)}
>
זֶה הוא התוכן של המודאל.
</ReactModal>
</div>
);
}
יְצוּאבְּרִירַת מֶחדָל דוגמא;
הפונקציה שאנו מעבירים למאפיין onRequestClose פשוט מגדירה את משתנה המצב isOpen ל-false. זה יגרום למודאל להיסגר.
אתה יכול גם להוסיף אביזרים אחרים לרכיב ReactModal כדי להתאים אותו יותר. לרשימה מלאה של אביזרים, אתה יכול לעיין בתיעוד ה-react-modal.
הוספת סטיילינג בחלונות קופצים
לאחר שיצרת את החלון הקופץ שלך, ייתכן שתרצה להוסיף לו קצת סטיילינג. ישנן דרכים רבות לסגנון רכיבי React, אך נתמקד בסגנונות מוטבעים.
סגנונות מוטבעים הם סגנונות שתוכל להוסיף ישירות לרכיב React. כדי להוסיף סגנונות מוטבעים, עליך להשתמש במאפיין הסגנון. מאפיין זה לוקח אובייקט כערך שלו, כאשר המפתחות הם מאפייני הסגנון והערכים הם ערכי הסגנון.
לדוגמה, כדי להוסיף צבע רקע של לבן ורוחב של 500 פיקסלים לחלון קופץ, תשתמש בקוד הבא:
יְבוּא לְהָגִיב מ 'לְהָגִיב';פוּנקצִיָהדוגמא() {
לַחֲזוֹר (
<div style={{ backgroundColor: 'לבן', רוחב: '500 פיקסלים' }}>
זֶה הוא תוכן החלון הקופץ.
</div>
);
}
יְצוּאבְּרִירַת מֶחדָל דוגמא;
בקוד זה, אתה מוסיף את מאפיין הסגנון לרכיב div עם מאפייני backgroundColor ו-width. אתה יכול גם השתמש ב-Tailwind CSS באפליקציית react כדי לעצב את החלונות הקופצים שלך.
הגדל את שיעור ההמרה באמצעות חלונות קופצים
חלונות קופצים יכולים לעזור להגדיל את שיעורי ההמרה על ידי הצגת מידע חשוב למשתמש. לדוגמה, אתה יכול להשתמש בחלון קופץ כדי להציג קוד הנחה או מבצע מיוחד. אתה יכול גם להשתמש בחלון קופץ כדי לאסוף כתובות דוא"ל עבור הניוזלטר שלך. הוספת חלון קופץ לאפליקציית React שלך היא דרך מצוינת להגדיל את שיעורי ההמרה.
אתה יכול גם לפרוס את אפליקציית React שלך בחינם בדפי GitHub.