أضف تأثيرات النوافذ المنبثقة إلى تطبيق React.js الخاص بك

تعد النوافذ المنبثقة طريقة رائعة لجذب انتباه المستخدم وعرض المعلومات المهمة. يمكنك استخدامها لأشياء مثل رسائل التأكيد ورسائل الخطأ. أو يمكنك فقط استخدامها لإظهار معلومات إضافية حول عنصر ما على الصفحة.

في React ، توجد طريقتان لإنشاء النوافذ المنبثقة: استخدام خطافات React أو استخدام وحدة خارجية.

---

---

اجعل فيديو اليوم

كيفية إنشاء النوافذ المنبثقة في React.js

أولاً، إنشاء تطبيق تفاعل بسيط . بعد ذلك ، يمكنك إضافة نافذة منبثقة باستخدام أي من الطريقتين. يمكنك استخدام خطافات React أو وحدة خارجية.

1. استخدام خطافات React

يعتبر أسلوب الخطافات أبسط ولا يتطلب سوى بضعة أسطر من التعليمات البرمجية.

أولاً ، تحتاج إلى إنشاء وظيفة تفتح النافذة المنبثقة. يمكنك تحديد هذه الوظيفة في المكون الذي سيعرض النافذة المنبثقة.

بعد ذلك ، تحتاج إلى استخدام الخطاف useState لإنشاء متغير حالة للنافذة المنبثقة. يمكنك استخدام متغير الحالة هذا لتحديد ما إذا كان يجب فتح النافذة المنبثقة أم لا.

أخيرًا ، تحتاج إلى إضافة زر إلى المكون الخاص بك والذي سيؤدي إلى تشغيل النافذة المنبثقة. عند النقر فوق هذا الزر ، اضبط متغير الحالة على صحيح ، مما سيؤدي إلى ظهور النافذة المنبثقة.

---

---

ألق نظرة على الكود الخاص بهذه الطريقة:

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 من مكتبة رد الفعل الأساسية. بعد ذلك ، تستخدم الدالة مثال الخطاف useState لإنشاء متغير حالة يسمى isOpen. يحدد متغير الحالة هذا ما إذا كان يجب أن تكون النافذة المنبثقة مفتوحة أم لا.

---

---

بعد ذلك ، أضف زرًا إلى المكون الذي سيؤدي إلى تشغيل النافذة المنبثقة. عند النقر فوق هذا الزر ، سيتم تعيين متغير الحالة على صحيح ، مما يؤدي إلى ظهور النافذة المنبثقة.

أخيرًا ، أضف زرًا إلى المكون الذي سيغلق النافذة المنبثقة. عند النقر فوق هذا الزر ، سيتم تعيين متغير الحالة على خطأ ، مما يؤدي إلى اختفاء النافذة المنبثقة.

2. استخدام وحدة خارجية

يمكنك أيضًا إنشاء نوافذ منبثقة في React باستخدام وحدة خارجية. هناك العديد من الوحدات المتاحة التي يمكنك استخدامها لهذا الغرض.

وحدة واحدة شائعة هي رد الفعل النموذجي. رد الفعل النموذجي عبارة عن وحدة بسيطة وخفيفة الوزن تسمح لك بإنشاء مربعات حوار مشروطة في React.

لاستخدام نموذج رد الفعل ، تحتاج أولاً إلى تثبيته باستخدام npm:

npm install react-modal

بمجرد تثبيت رد الفعل-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 ولكن مع وحدة نمطية رد فعل. باستخدام وحدة الوسائط التفاعلية ، يمكنك إضافة المزيد من الوظائف إلى النافذة المنبثقة. كما ترى ، الكود مشابه جدًا للنهج السابق. الاختلاف الوحيد هو أنك تستخدم الآن مكون ReactModal من رد الفعل النموذجي بدلاً من إنشاء مكون خاص بك.

أولاً ، يجب عليك استيراد وحدة الوسائط التفاعلية. بعد ذلك ، يمكنك استخدام مكون ReactModal لالتفاف محتوى النافذة المنبثقة. استخدم الخاصية isOpen لتحديد ما إذا كان يجب أن يكون النموذج مفتوحًا أم لا.

بمجرد إنشاء النافذة المنبثقة الخاصة بك ، قد ترغب في إضافة ميزات إضافية إليها. على سبيل المثال ، قد ترغب في إغلاق النافذة المنبثقة عندما ينقر المستخدم خارجها.

للقيام بذلك ، تحتاج إلى استخدام خاصية onRequest الخاصة بمكون رد الفعل. تأخذ هذه الخاصية وظيفة كقيمة لها. ستعمل هذه الوظيفة عندما ينقر المستخدم خارج النموذج.

على سبيل المثال ، لإغلاق النافذة المنبثقة عندما ينقر المستخدم خارجها ، يمكنك استخدام الكود التالي:

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 تعيّن ببساطة متغير الحالة isOpen إلى false. سيؤدي هذا إلى إغلاق الوسائط.

يمكنك أيضًا إضافة خاصيات أخرى إلى مكون ReactModal لتخصيصه بشكل أكبر. للحصول على قائمة كاملة من الدعائم ، يمكنك التحقق من وثائق نموذج رد الفعل.

ماذا تفعل مع الشاشات المسطحة القديمة

إضافة نمط في النوافذ المنبثقة

بمجرد إنشاء النافذة المنبثقة الخاصة بك ، قد ترغب في إضافة بعض التصميم إليها. هناك العديد من الطرق لتصميم مكونات 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 مجانًا على صفحات GitHub.