আপনার React.js অ্যাপে পপ-আপ ইফেক্ট যোগ করুন

পপ-আপগুলি আপনার ব্যবহারকারীর দৃষ্টি আকর্ষণ করার এবং গুরুত্বপূর্ণ তথ্য প্রদর্শন করার একটি দুর্দান্ত উপায়৷ আপনি এগুলি নিশ্চিতকরণ বার্তা এবং ত্রুটি বার্তাগুলির মতো জিনিসগুলির জন্য ব্যবহার করতে পারেন৷ অথবা আপনি একটি পৃষ্ঠায় একটি উপাদান সম্পর্কে অতিরিক্ত তথ্য প্রদর্শন করতে তাদের ব্যবহার করতে পারেন।

প্রতিক্রিয়াতে, পপ-আপগুলি তৈরি করার দুটি উপায় রয়েছে: প্রতিক্রিয়া হুক ব্যবহার করে বা একটি বহিরাগত মডিউল ব্যবহার করে৷

---

---

দিনের মেকইউজের ভিডিও

কিভাবে React.js এ পপ-আপ তৈরি করবেন

প্রথম, একটি সাধারণ প্রতিক্রিয়া অ্যাপ তৈরি করুন . এর পরে, আপনি দুটি পদ্ধতির মধ্যে একটি ব্যবহার করে একটি পপ-আপ যোগ করতে পারেন। আপনি প্রতিক্রিয়া হুক বা একটি বহিরাগত মডিউল ব্যবহার করতে পারেন।

1. প্রতিক্রিয়া হুক ব্যবহার করে

হুক পদ্ধতি সহজ এবং শুধুমাত্র কোডের কয়েকটি লাইন প্রয়োজন।

প্রথমত, আপনাকে একটি ফাংশন তৈরি করতে হবে যা পপ-আপ খুলবে। আপনি এই ফাংশনটি কম্পোনেন্টে সংজ্ঞায়িত করতে পারেন যা পপ-আপ প্রদর্শন করবে।

এর পরে, পপ-আপের জন্য একটি স্টেট ভেরিয়েবল তৈরি করতে আপনাকে 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 হুক আমদানি করে। তারপর, Example ফাংশন useState হুক ব্যবহার করে isOpen নামে একটি স্টেট ভেরিয়েবল তৈরি করে। এই স্টেট ভেরিয়েবল নির্ধারণ করে যে পপ-আপ খোলা হবে কি না।

---

---

এর পরে, উপাদানটিতে একটি বোতাম যুক্ত করুন যা পপ-আপটিকে ট্রিগার করবে। যখন আপনি এই বোতামটি ক্লিক করবেন, তখন স্টেট ভেরিয়েবল সত্যে সেট করা হবে, যার ফলে পপ-আপ প্রদর্শিত হবে।

অবশেষে, উপাদানটিতে একটি বোতাম যোগ করুন যা পপ-আপ বন্ধ করবে। যখন আপনি এই বোতামটি ক্লিক করবেন, তখন স্টেট ভেরিয়েবল মিথ্যাতে সেট করা হবে, যার ফলে পপ-আপ অদৃশ্য হয়ে যাবে।

2. একটি বাহ্যিক মডিউল ব্যবহার করা

আপনি একটি বহিরাগত মডিউল ব্যবহার করে প্রতিক্রিয়াতে পপ-আপ তৈরি করতে পারেন। আপনি এই উদ্দেশ্যে ব্যবহার করতে পারেন যে উপলব্ধ অনেক মডিউল আছে.

উইন্ডোজ 10 স্টপ কোড মেশিন চেক ব্যতিক্রম

একটি জনপ্রিয় মডিউল হল প্রতিক্রিয়া-মোডাল। react-modal হল একটি সহজ এবং হালকা মডিউল যা আপনাকে React-এ মোডাল ডায়ালগ তৈরি করতে দেয়।

প্রতিক্রিয়া-মোডাল ব্যবহার করতে, আপনাকে প্রথমে npm ব্যবহার করে এটি ইনস্টল করতে হবে:

npm install react-modal

একবার আপনি প্রতিক্রিয়া-মোডাল ইনস্টল করার পরে, আপনি এটি আপনার প্রতিক্রিয়া উপাদানে আমদানি করতে পারেন:

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-modal থেকে ReactModal উপাদান ব্যবহার করছেন।

উইন্ডোজ ১০ আপগ্রেড করার পর ইন্টারনেট স্লো

প্রথমত, আপনাকে প্রতিক্রিয়া-মোডাল মডিউল আমদানি করতে হবে। তারপর, আপনি আপনার পপ-আপের বিষয়বস্তু মোড়ানোর জন্য ReactModal উপাদান ব্যবহার করুন। মোডাল খোলা হবে কিনা তা নির্ধারণ করতে isOpen প্রপ ব্যবহার করুন।

একবার আপনি আপনার পপ-আপ তৈরি করলে, আপনি এতে অতিরিক্ত বৈশিষ্ট্য যোগ করতে চাইতে পারেন। উদাহরণস্বরূপ, আপনি পপ-আপ বন্ধ করতে চাইতে পারেন যখন ব্যবহারকারী এটির বাইরে ক্লিক করে।

এটি করার জন্য, আপনাকে react-modal উপাদানের 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 স্টেট ভেরিয়েবলটিকে মিথ্যাতে সেট করে। এর ফলে মোডাল বন্ধ হয়ে যাবে।

আপনি এটিকে আরও কাস্টমাইজ করতে ReactModal উপাদানটিতে অন্যান্য প্রপস যোগ করতে পারেন। প্রপগুলির একটি সম্পূর্ণ তালিকার জন্য, আপনি প্রতিক্রিয়া-মোডাল ডকুমেন্টেশন পরীক্ষা করতে পারেন।

পপ-আপে স্টাইলিং যোগ করা হচ্ছে

একবার আপনি আপনার পপ-আপ তৈরি করলে, আপনি এতে কিছু স্টাইলিং যোগ করতে চাইতে পারেন। প্রতিক্রিয়া উপাদান স্টাইল করার অনেক উপায় আছে, কিন্তু আমরা ইনলাইন শৈলীতে ফোকাস করব।

ইনলাইন শৈলী হল শৈলী যা আপনি সরাসরি একটি প্রতিক্রিয়া উপাদানে যোগ করতে পারেন। ইনলাইন শৈলী যোগ করতে, আপনাকে শৈলী বৈশিষ্ট্য ব্যবহার করতে হবে। এই বৈশিষ্ট্যটি একটি বস্তুকে তার মান হিসাবে নেয়, যেখানে কীগুলি হল শৈলী বৈশিষ্ট্য এবং মানগুলি হল শৈলীর মান।

উদাহরণস্বরূপ, একটি পপ-আপে সাদা রঙের একটি পটভূমির রঙ এবং 500px প্রস্থ যোগ করতে, আপনি নিম্নলিখিত কোডটি ব্যবহার করবেন:

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 উপাদানে শৈলী বৈশিষ্ট্য যোগ করুন। আপনি এটিও করতে পারেন প্রতিক্রিয়া অ্যাপে Tailwind CSS ব্যবহার করুন আপনার পপআপ স্টাইল করতে।

পপ-আপের মাধ্যমে রূপান্তর হার বৃদ্ধি করুন

পপ-আপগুলি ব্যবহারকারীর কাছে গুরুত্বপূর্ণ তথ্য প্রদর্শন করে রূপান্তর হার বাড়াতে সাহায্য করতে পারে। উদাহরণস্বরূপ, আপনি একটি ডিসকাউন্ট কোড বা একটি বিশেষ অফার প্রদর্শন করতে একটি পপ-আপ ব্যবহার করতে পারেন৷ আপনি আপনার নিউজলেটারের জন্য ইমেল ঠিকানা সংগ্রহ করতে একটি পপ-আপ ব্যবহার করতে পারেন। আপনার প্রতিক্রিয়া অ্যাপে একটি পপ-আপ যোগ করা রূপান্তর হার বাড়ানোর একটি দুর্দান্ত উপায়।

এছাড়াও আপনি সহজেই গিটহাব পৃষ্ঠাগুলিতে বিনামূল্যে আপনার প্রতিক্রিয়া অ্যাপ্লিকেশন স্থাপন করতে পারেন।