افکت های پاپ آپ را به برنامه React.js خود اضافه کنید

پاپ آپ ها راهی عالی برای جلب توجه کاربران و نمایش اطلاعات مهم هستند. می توانید از آنها برای مواردی مانند پیام های تأیید و پیام های خطا استفاده کنید. یا فقط می توانید از آنها برای نشان دادن اطلاعات اضافی در مورد یک عنصر در یک صفحه استفاده کنید.

در React دو راه برای ایجاد پاپ آپ وجود دارد: استفاده از قلاب های React یا استفاده از یک ماژول خارجی.

نحوه ایجاد پاپ آپ در React.js

ابتدا یک برنامه واکنش ساده ایجاد کنید. پس از آن، می توانید با استفاده از یکی از دو روش، یک پاپ آپ اضافه کنید. می توانید از قلاب های React یا یک ماژول خارجی استفاده کنید.

1. استفاده از React Hooks

رویکرد هوک ساده‌تر است و تنها به چند خط کد نیاز دارد.

ابتدا باید یک تابع ایجاد کنید که پاپ آپ را باز کند. می توانید این تابع را در کامپوننتی که پاپ آپ نمایش داده می شود تعریف کنید.

در مرحله بعد، باید از قلاب useState برای ایجاد یک متغیر حالت برای پاپ آپ استفاده کنید. شما می توانید از این متغیر حالت برای تعیین باز بودن یا نبودن پاپ آپ استفاده کنید.

در نهایت، باید دکمه ای را به کامپوننت خود اضافه کنید که پاپ آپ را راه اندازی کند. وقتی روی این دکمه کلیک می کنید، متغیر state را روی 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)}>
          Close Pop-up
        </button>
       </div>
      )}
    </div>
  );
}
 
export default Example;

ابتدا این کد قلاب useState را از کتابخانه هسته واکنش وارد می کند. سپس، تابع Example از قلاب useState برای ایجاد یک متغیر حالت به نام isOpen استفاده می کند. این متغیر حالت تعیین می کند که آیا پاپ آپ باید باز باشد یا خیر.

مطلب مرتبط: ایجاد اعلان‌های جذاب با Toastr در React

در مرحله بعد، دکمه ای را به مؤلفه اضافه کنید که پاپ آپ را راه اندازی کند. وقتی روی این دکمه کلیک می کنید، متغیر state روی true تنظیم می شود که باعث می شود پاپ آپ ظاهر شود.

در نهایت یک دکمه به کامپوننت اضافه کنید که پنجره پاپ آپ را می بندد. وقتی روی این دکمه کلیک می کنید، متغیر state روی false تنظیم می شود که باعث ناپدید شدن پاپ آپ می شود.

2. استفاده از یک ماژول خارجی

همچنین می توانید با استفاده از یک ماژول خارجی در React پاپ آپ ایجاد کنید. ماژول های زیادی وجود دارد که می توانید برای این منظور از آنها استفاده کنید.

یکی از ماژول های محبوب React-Modal است. 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 استفاده می کنید اما با ماژول react-modal. با استفاده از ماژول react-modal، می‌توانید قابلیت‌های بیشتری را به پاپ آپ اضافه کنید. همانطور که می بینید، کد بسیار شبیه به روش قبلی است. تنها تفاوت این است که شما اکنون از کامپوننت ReactModal از react-modal به جای ایجاد مولفه خود استفاده می کنید.

مطلب مرتبط: نحوه استفاده از حلقه Do-While در Excel VBA

ابتدا باید ماژول react-modal را وارد کنید. سپس، از مؤلفه ReactModal برای بسته بندی محتوای پاپ آپ خود استفاده می کنید. برای تعیین اینکه آیا مودال باید باز باشد یا خیر از پروپ isOpen استفاده کنید.

هنگامی که پاپ آپ خود را ایجاد کردید، ممکن است بخواهید ویژگی های دیگری را به آن اضافه کنید. به عنوان مثال، ممکن است بخواهید زمانی که کاربر در خارج از آن کلیک می کند، پنجره بازشو را ببندید.

برای انجام این کار، باید از پروپ onRequestClose کامپوننت 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"
        onRequestClose={() => setIsOpen(false)}
      >
        This is the content of the modal.
      </ReactModal>
    </div>
  );
}
 
export default Example;

تابعی که به پروپ onRequestClose منتقل می کنیم به سادگی متغیر isOpen حالت را روی false قرار می دهد. این باعث بسته شدن مودال می شود.

همچنین می توانید برای سفارشی کردن بیشتر اجزای ReactModal، ابزارهای دیگری را نیز اضافه کنید. برای یک لیست کامل از لوازم، می توانید مستندات react-modal را بررسی کنید.

مطلب مرتبط: 5 ابزاری که به شما کمک می کند تا برنامه Vue.js خود را در دسترس همه قرار دهید

اضافه کردن استایل در پاپ آپ ها

هنگامی که پاپ آپ خود را ایجاد کردید، ممکن است بخواهید سبکی به آن اضافه کنید. راه های زیادی برای استایل دادن به کامپوننت های React وجود دارد، اما ما روی استایل های درون خطی تمرکز خواهیم کرد.

استایل های درون خطی سبک هایی هستند که می توانید مستقیماً به یک جزء React اضافه کنید. برای افزودن استایل های درون خطی، باید از ویژگی style استفاده کنید. این ویژگی یک شی را به عنوان مقدار خود می گیرد، جایی که کلیدها ویژگی های سبک و مقادیر مقادیر سبک هستند.

به عنوان مثال، برای اضافه کردن رنگ پس‌زمینه سفید و عرض 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;

در این کد، ویژگی style را با ویژگی های backgroundColor و width به عنصر div اضافه می کنید. همچنین می توانید از Tailwind CSS در برنامه react برای استایل دادن به پنجره های بازشو استفاده کنید.

افزایش نرخ تبدیل با پاپ آپ

پاپ آپ ها می توانند با نمایش اطلاعات مهم به کاربر، به افزایش نرخ تبدیل کمک کنند. برای مثال می توانید از یک پاپ آپ برای نمایش کد تخفیف یا پیشنهاد ویژه استفاده کنید. همچنین می توانید از یک پاپ آپ برای جمع آوری آدرس ایمیل برای خبرنامه خود استفاده کنید. افزودن یک پاپ آپ به برنامه React یک راه عالی برای افزایش نرخ تبدیل است.

همچنین می توانید به راحتی برنامه React خود را به صورت رایگان در صفحات GitHub مستقر کنید.

Tags: برنامه نويسی واکنش نشان دهند