הוסף אפקטים קופצים לאפליקציית React.js שלך

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

ב-React, ישנן שתי דרכים ליצור חלונות קופצים: שימוש ב-react hooks או שימוש במודול חיצוני.

איפור של סרטון היום

כיצד ליצור חלונות קופצים ב-React.js

ראשון, ליצור אפליקציית תגובה פשוטה . לאחר מכן, תוכל להוסיף חלון קופץ באחת משתי השיטות. אתה יכול להשתמש בווי React או במודול חיצוני.

1. שימוש ב-React Hooks

גישת ה-hooks פשוטה יותר ודורשת רק כמה שורות קוד.

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

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

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

תסתכל על הקוד של גישה זו:

import React, { useState } from 'react'; 
  
function Example() { 
  const [isOpen, setIsOpen] = useState(false); 
  
  return ( 
    <div> 
      <button onClick={() => setIsOpen(true)}> 
        Open Pop-up 
      </button> 
  
      {isOpen && ( 
       <div> 
        <div> 
          This is the content of the pop-up. 
        </div> 
        <button onClick={() => setIsOpen(false)}> 
           Pop-up 
        </button> 
       </div> 
      )} 
    </div> 
  ); 
} 
  
export default Example;

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

סרטים בחינם ללא הרשמה או תשלום

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

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

2. שימוש במודול חיצוני

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

מודול פופולרי אחד הוא תגובה-מודאלית. react-modal הוא מודול פשוט וקל משקל המאפשר לך ליצור דיאלוגים מודאליים ב-React.

כדי להשתמש ב-react-modal, תחילה עליך להתקין אותו באמצעות npm:

npm install react-modal

לאחר שהתקנת את react-modal, תוכל לייבא אותו לרכיב React שלך:

import ReactModal from 'react-modal'; 
import React, { useState } from 'react'; 
  
function Example() { 
  const [isOpen, setIsOpen] = useState(false); 
  
  return ( 
    <div> 
      <button onClick={setIsOpen}>Open Modal</button> 
      <ReactModal 
        isOpen={isOpen} 
        contentLabel="Example Modal" 
      > 
        This is the content of the modal. 
      </ReactModal> 
    </div> 
  ); 
} 
  
export default Example;

בקוד זה, אתה עדיין משתמש ב-react hooks אבל עם מודול react-modal. עם מודול ה-react-modal, אתה יכול להוסיף עוד פונקציונליות לחלון הקופץ. כפי שאתה יכול לראות, הקוד דומה מאוד לגישה הקודמת. ההבדל היחיד הוא שאתה משתמש כעת ברכיב ReactModal מ-react-modal במקום ליצור משלך.

ראשית, עליך לייבא את מודול ה-react-modal. לאחר מכן, אתה משתמש ברכיב ReactModal כדי לעטוף את התוכן של החלון הקופץ שלך. השתמש באבזר isOpen כדי לקבוע אם המודאל צריך להיות פתוח או לא.

כיצד לברר מידע אישי על מישהו בחינם

לאחר שיצרת את החלון הקופץ שלך, ייתכן שתרצה להוסיף לו תכונות נוספות. לדוגמה, ייתכן שתרצה לסגור את החלון הקופץ כאשר המשתמש לוחץ מחוץ לו.

כדי לעשות זאת, עליך להשתמש באבזר onRequest של הרכיב react-modal. אביזר זה לוקח פונקציה כערך שלה. פונקציה זו תפעל כאשר המשתמש ילחץ מחוץ למודאל.

לדוגמה, כדי לסגור את החלון הקופץ כאשר המשתמש לוחץ מחוץ לו, תשתמש בקוד הבא:

import React, { useState } from 'react'; 
import ReactModal from 'react-modal'; 
  
function Example() { 
  const [isOpen, setIsOpen] = useState(false); 
  
  return ( 
    <div> 
      <button onClick={() => setIsOpen(true)}> 
        Open Modal 
      </button> 
      <ReactModal 
        isOpen={isOpen} 
        contentLabel="Example Modal" 
        onRequest={() => setIsOpen(false)} 
      > 
        This is the content of the modal. 
      </ReactModal> 
    </div> 
  ); 
} 
  
export default Example;

הפונקציה שאנו מעבירים ל-onRequest prop פשוט מגדירה את משתנה המצב isOpen ל-false. זה יגרום למודאל להיסגר.

אתה יכול גם להוסיף אביזרים אחרים לרכיב ReactModal כדי להתאים אותו יותר. לרשימה מלאה של אביזרים, אתה יכול לעיין בתיעוד ה-react-modal.

הוספת סטיילינג בחלונות קופצים

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

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

לדוגמה, כדי להוסיף צבע רקע של לבן ורוחב של 500 פיקסלים לחלון קופץ, תשתמש בקוד הבא:

import React from 'react'; 
  
function Example() { 
  return ( 
    <div style={{ backgroundColor: 'white', width: '500px' }}> 
      This is the content of the pop-up. 
    </div> 
  ); 
} 
  
export default Example;

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

הגדל את שיעור ההמרה באמצעות חלונות קופצים

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

אתה יכול גם לפרוס את אפליקציית React שלך בחינם בדפי GitHub.