पॉप-अप आपके उपयोगकर्ता का ध्यान आकर्षित करने और महत्वपूर्ण जानकारी प्रदर्शित करने का एक शानदार तरीका है। आप उनका उपयोग पुष्टिकरण संदेशों और त्रुटि संदेशों जैसी चीज़ों के लिए कर सकते हैं। या आप किसी पृष्ठ पर किसी तत्व के बारे में अतिरिक्त जानकारी दिखाने के लिए उनका उपयोग कर सकते हैं।
रिएक्ट में, पॉप-अप बनाने के दो तरीके हैं: रिएक्ट हुक का उपयोग करना या बाहरी मॉड्यूल का उपयोग करना।
React.js में पॉप-अप कैसे बनाएं
पहला, एक साधारण प्रतिक्रिया ऐप बनाएं. उसके बाद, आप दो विधियों में से किसी एक का उपयोग करके पॉप-अप जोड़ सकते हैं। आप रिएक्ट हुक या बाहरी मॉड्यूल का उपयोग कर सकते हैं।
1. रिएक्ट हुक का उपयोग करना
हुक दृष्टिकोण सरल है और केवल कोड की कुछ पंक्तियों की आवश्यकता होती है।
सबसे पहले, आपको एक फ़ंक्शन बनाना होगा जो पॉप-अप खोलेगा। आप इस फ़ंक्शन को उस घटक में परिभाषित कर सकते हैं जो पॉप-अप प्रदर्शित करेगा।
अगला, आपको पॉप-अप के लिए स्टेट वैरिएबल बनाने के लिए यूजस्टेट हुक का उपयोग करने की आवश्यकता है। आप इस स्थिति चर का उपयोग यह निर्धारित करने के लिए कर सकते हैं कि पॉप-अप खुला होना चाहिए या नहीं।
अंत में, आपको अपने कंपोनेंट में एक बटन जोड़ना होगा जो पॉप-अप को ट्रिगर करेगा। जब आप इस बटन पर क्लिक करते हैं, तो स्टेट वेरिएबल को ट्रू पर सेट करें, जिससे पॉप-अप दिखाई देगा।
इस दृष्टिकोण के लिए कोड पर एक नज़र डालें:
आयात प्रतिक्रिया, {useState} से 'प्रतिक्रिया';समारोहउदाहरण() {
कॉन्स्ट [isOpen, setIsOpen] = useState(असत्य);वापस करना (
<डिव>
<बटन ऑनक्लिक = {() => सेटइस ओपन (सत्य)}>
पॉप-अप खोलें
</button>{खुला है && (
<डिव>
<डिव>
यह है पॉप-अप की सामग्री।
</div>
<बटन ऑनक्लिक = {() => सेटइस ओपन (झूठा)}>
पॉप-अप बंद करें
</button>
</div>
)}
</div>
);
}
निर्यातगलती करना उदाहरण;
सबसे पहले, यह कोड कोर रिएक्शन लाइब्रेरी से यूजस्टेट हुक आयात करता है। फिर, उदाहरण फ़ंक्शन isOpen नामक एक स्टेट वेरिएबल बनाने के लिए useState हुक का उपयोग करता है। यह स्थिति चर निर्धारित करता है कि पॉप-अप खुला होना चाहिए या नहीं।
अगला, उस घटक में एक बटन जोड़ें जो पॉप-अप को ट्रिगर करेगा। जब आप इस बटन पर क्लिक करते हैं, तो स्टेट वेरिएबल ट्रू पर सेट हो जाएगा, जिससे पॉप-अप दिखाई देगा।
अंत में, घटक में एक बटन जोड़ें जो पॉप-अप को बंद कर देगा। जब आप इस बटन पर क्लिक करते हैं, तो स्टेट वेरिएबल गलत पर सेट हो जाएगा, जिससे पॉप-अप गायब हो जाएगा।
2. एक बाहरी मॉड्यूल का उपयोग करना
आप बाहरी मॉड्यूल का उपयोग करके रिएक्ट में पॉप-अप भी बना सकते हैं। ऐसे कई मॉड्यूल उपलब्ध हैं जिनका आप इस उद्देश्य के लिए उपयोग कर सकते हैं।
एक लोकप्रिय मॉड्यूल प्रतिक्रिया-मोडल है। प्रतिक्रिया-मोडल एक सरल और हल्का मॉड्यूल है जो आपको प्रतिक्रिया में मोडल संवाद बनाने की अनुमति देता है।
प्रतिक्रिया-मोडल का उपयोग करने के लिए, आपको पहले इसे npm का उपयोग करके इंस्टॉल करना होगा:
NPM स्थापित करना प्रतिक्रिया मोडलएक बार जब आप प्रतिक्रिया-मोडल स्थापित कर लेते हैं, तो आप इसे अपने प्रतिक्रिया घटक में आयात कर सकते हैं:
आयात रिएक्टमोडल से 'प्रतिक्रिया-मोडल';
आयात प्रतिक्रिया, {useState} से 'प्रतिक्रिया';समारोहउदाहरण() {
कॉन्स्ट [isOpen, setIsOpen] = useState(असत्य);वापस करना (
<डिव>
<बटन ऑनक्लिक = {setIsOpen}>ओपन मोडल</button>
<रिएक्टमोडल
isOpen={isOpen}
सामग्री लेबल ="उदाहरण मोडल"
>
यह है मोडल की सामग्री।
</ReactModal>
</div>
);
}
निर्यातगलती करना उदाहरण;
इस कोड में, आप अभी भी रिएक्ट हुक का उपयोग कर रहे हैं लेकिन रिएक्ट-मोडल मॉड्यूल के साथ। प्रतिक्रिया-मोडल मॉड्यूल के साथ, आप पॉप-अप में अधिक कार्यक्षमता जोड़ सकते हैं। जैसा कि आप देख सकते हैं, कोड पिछले दृष्टिकोण के समान है। फर्क सिर्फ इतना है कि अब आप अपना खुद का निर्माण करने के बजाय प्रतिक्रिया-मोडल से रिएक्टमॉडल घटक का उपयोग कर रहे हैं।
सबसे पहले, आपको प्रतिक्रिया-मोडल मॉड्यूल आयात करना होगा। फिर, आप अपने पॉप-अप की सामग्री को रैप करने के लिए ReactModal घटक का उपयोग करते हैं। मॉडल खुला होना चाहिए या नहीं यह निर्धारित करने के लिए isOpen प्रोप का उपयोग करें।
एक बार जब आप अपना पॉप-अप बना लेते हैं, तो आप इसमें अतिरिक्त सुविधाएँ जोड़ना चाह सकते हैं। उदाहरण के लिए, जब उपयोगकर्ता पॉप-अप के बाहर क्लिक करता है तो आप पॉप-अप को बंद करना चाह सकते हैं।
ऐसा करने के लिए, आपको प्रतिक्रिया-मोडल घटक के onRequestClose प्रोप का उपयोग करने की आवश्यकता है। यह प्रोप एक फ़ंक्शन को इसके मूल्य के रूप में लेता है। यह फ़ंक्शन तब चलेगा जब उपयोगकर्ता मोडल के बाहर क्लिक करेगा।
उदाहरण के लिए, जब उपयोगकर्ता पॉप-अप के बाहर क्लिक करता है तो उसे बंद करने के लिए, आप निम्न कोड का उपयोग करेंगे:
आयात प्रतिक्रिया, {useState} से 'प्रतिक्रिया';
आयात रिएक्टमोडल से 'प्रतिक्रिया-मोडल';समारोहउदाहरण() {
कॉन्स्ट [isOpen, setIsOpen] = useState(असत्य);वापस करना (
<डिव>
<बटन ऑनक्लिक = {() => सेटइस ओपन (सत्य)}>
ओपन मोडल
</button>
<रिएक्टमोडल
isOpen={isOpen}
सामग्री लेबल ="उदाहरण मोडल"
onRequestClose={() => setIsOpen(असत्य)}
>
यह है मोडल की सामग्री।
</ReactModal>
</div>
);
}
निर्यातगलती करना उदाहरण;
जिस फ़ंक्शन को हम onRequestClose प्रोप में पास कर रहे हैं, वह केवल isOpen स्टेट वैरिएबल को गलत पर सेट करता है। इससे मोडल बंद हो जाएगा।
आप इसे और अधिक अनुकूलित करने के लिए ReactModal घटक में अन्य प्रॉप्स भी जोड़ सकते हैं। प्रॉप्स की पूरी सूची के लिए, आप रिएक्ट-मोडल डॉक्यूमेंटेशन देख सकते हैं।
पॉप-अप में स्टाइलिंग जोड़ना
एक बार जब आप अपना पॉप-अप बना लेते हैं, तो आप इसमें कुछ स्टाइल जोड़ना चाह सकते हैं। रिएक्ट घटकों को स्टाइल करने के कई तरीके हैं, लेकिन हम इनलाइन शैलियों पर ध्यान केंद्रित करेंगे।
इनलाइन शैलियाँ ऐसी शैलियाँ हैं जिन्हें आप सीधे एक रिएक्ट घटक में जोड़ सकते हैं। इनलाइन स्टाइल जोड़ने के लिए, आपको स्टाइल प्रॉपर्टी का उपयोग करना होगा। यह गुण किसी वस्तु को उसके मूल्य के रूप में लेता है, जहाँ कुंजियाँ शैली गुण हैं और मान शैली मान हैं।
उदाहरण के लिए, एक पॉप-अप में सफेद पृष्ठभूमि का रंग और 500px की चौड़ाई जोड़ने के लिए, आप निम्न कोड का उपयोग करेंगे:
आयात प्रतिक्रिया से 'प्रतिक्रिया';समारोहउदाहरण() {
वापस करना (
<div शैली = {{पृष्ठभूमि का रंग: 'सफ़ेद', चौड़ाई: '500 पीएक्स' }}>
यह है पॉप-अप की सामग्री।
</div>
);
}
निर्यातगलती करना उदाहरण;
इस कोड में, आप शैली गुण को पृष्ठभूमि तत्व और चौड़ाई गुणों के साथ div तत्व में जोड़ते हैं। आप भी कर सकते हैं प्रतिक्रिया ऐप में टेलविंड सीएसएस का उपयोग करें अपने पॉपअप को स्टाइल करने के लिए।
पॉप-अप के साथ रूपांतरण दर बढ़ाएँ
पॉप-अप उपयोगकर्ता को महत्वपूर्ण जानकारी प्रदर्शित करके रूपांतरण दर बढ़ाने में सहायता कर सकते हैं। उदाहरण के लिए, आप डिस्काउंट कोड या विशेष ऑफ़र प्रदर्शित करने के लिए पॉप-अप का उपयोग कर सकते हैं। आप अपने न्यूज़लेटर के लिए ईमेल पते एकत्र करने के लिए पॉप-अप का उपयोग भी कर सकते हैं। अपने रिएक्ट ऐप में पॉप-अप जोड़ना रूपांतरण दर बढ़ाने का एक शानदार तरीका है।
आप अपने रिएक्ट एप्लिकेशन को आसानी से गिटहब पेजों पर मुफ्त में तैनात कर सकते हैं।
