चक्र यूआई के साथ अपने रिएक्ट एप्लिकेशन में कस्टम अलर्ट बनाएं

अलर्ट किसी उपयोगकर्ता को महत्वपूर्ण जानकारी देने के लिए वेबसाइट/वेब एप्लिकेशन पर प्रदर्शित संदेश होते हैं। वे वेब अनुप्रयोगों में एक महत्वपूर्ण भूमिका निभाते हैं। रिएक्ट में अलर्ट बनाने के कई तरीके हैं; चक्र यूआई प्रक्रिया को आसान और कुशल बनाता है।

चक्र यूआई रिएक्ट के लिए एक लोकप्रिय घटक पुस्तकालय है जो अनुकूलन योग्य और सुलभ यूआई घटकों का एक सेट प्रदान करता है।

चक्र यूआई स्थापित करना

चक्र यूआई पुस्तकालय का उपयोग करने के लिए, कई प्रतिक्रिया घटक पुस्तकालयों में से एक, आपको पहले इसे इंस्टॉल करना होगा। आप अपने नोड.जेएस प्रोजेक्ट की निर्देशिका में निम्नलिखित टर्मिनल कमांड चलाकर इसे स्थापित कर सकते हैं:

npm i @चक्र-उई/प्रतिक्रिया @भावना/प्रतिक्रिया @भावना/शैली फ्रैमर-मोशन

वैकल्पिक रूप से, आप यार्न का उपयोग करके चक्र यूआई स्थापित कर सकते हैं। ऐसा करने के लिए, निम्न कमांड चलाएँ:

यार्न ऐड @ चक्र-उई/रिएक्ट @ इमोशन/रिएक्ट @ इमोशन/स्टाइल फ्रेमर-मोशन

चक्र यूआई की स्थापना

चक्र यूआई स्थापित करने के बाद, आपको इसे अपने आवेदन में उपलब्ध कराना होगा। ऐसा करने के लिए, आपको सेट अप करने की आवश्यकता है चक्रप्रदाता अवयव।

चक्रप्रदाता घटक एक शीर्ष-स्तरीय घटक है जो चक्र यूआई पुस्तकालय प्रदान करता है। यह संपूर्ण एप्लिकेशन को लपेटता है और इसके सभी घटकों को थीम और स्टाइलिंग संदर्भ प्रदान करता है।

सेट अप करने के लिए चक्रप्रदाता घटक, इसे से आयात करें @चक्र-उई/react:

आयात प्रतिक्रिया से'प्रतिक्रिया'
आयात रिएक्टडॉम से'प्रतिक्रिया-डोम/क्लाइंट'
आयात अनुप्रयोग से'।/अनुप्रयोग'
आयात {चक्रप्रदाता} से'@चक्र-उई/प्रतिक्रिया'
रिएक्टडोम.क्रिएटरूट (दस्तावेज़.getElementById('जड़') जैसा HTMLElement).रेंडर (



 </ChakraProvider>
 </React.StrictMode>
)

चक्रप्रदाता घटक ए का समर्थन करता है थीम सहारा। उत्तीर्ण करना थीम के लिए सहारा चक्रप्रदाता घटक सुनिश्चित करता है कि एप्लिकेशन में सभी चक्र यूआई घटक प्रदान की गई थीम और स्टाइलिंग संदर्भ तक पहुंच सकते हैं। थीम सहारा वैकल्पिक है; यदि आप इसे पास नहीं करते हैं, तो चक्र यूआई एक डिफ़ॉल्ट थीम का उपयोग करेगा।

अलर्ट घटकों का उपयोग करके कस्टम अलर्ट बनाना

चक्र यूआई चार घटक प्रदान करता है जो आपको एक कस्टम अलर्ट बनाने देता है: चेतावनी, अलर्टआइकन, अलर्टटाइटल, और अलर्ट विवरण.

अपना अलर्ट संदेश बनाने के लिए, इन घटकों को चक्र यूआई लाइब्रेरी से आयात करें और उन्हें निम्नानुसार उपयोग करें:

आयात प्रतिक्रिया से'प्रतिक्रिया';
आयात {अलर्ट, अलर्टआइकॉन, अलर्टडिस्क्रिप्शन, अलर्टटाइटल} से'@चक्र-उई/प्रतिक्रिया'
समारोहअनुप्रयोग() {
वापस करना (



'सफलता'>

आपका स्वागत है!!!</AlertTitle>
आपको यहां पाकर अच्छा लगा</AlertDescription>
 </Alert>
 </div>
 )
}
निर्यातगलती करना अनुप्रयोग

घटकों को आयात करने के बाद, चेतावनी घटक उपयोगकर्ता को एक संदेश प्रदर्शित करता है। यह है एक दर्जा प्रॉप "सफलता" पर सेट है, जो इंगित करता है कि संदेश एक सफलता संदेश है।

तीन अन्य स्थितियाँ हैं: "जानकारी," "त्रुटि," और "चेतावनी।" अलर्ट द्वारा उपयोग की जाने वाली रंग योजना और चिह्न संदेश की स्थिति पर निर्भर करेगा।

चेतावनी घटक में तीन बच्चे शामिल हैं: अलर्टआइकन, अलर्टटाइटल, और अलर्ट विवरण. अलर्टआइकन घटक संदेश के बगल में एक छोटा आइकन प्रदर्शित करता है, अलर्टटाइटल मुख्य संदेश प्रदर्शित करता है, और अलर्ट विवरण संदेश का अधिक विस्तृत विवरण प्रदर्शित करता है।

पिछला कोड ब्लॉक इस तरह दिखने वाला अलर्ट उत्पन्न करेगा:

वेरिएंट प्रॉप का उपयोग करके अलर्ट संदेशों को अनुकूलित करना

अलर्ट संदेश के प्रकटन को अनुकूलित करने के लिए, का उपयोग करें प्रकार का सहारा चेतावनी अवयव। प्रकार प्रोप अलर्ट संदेश की दृश्य उपस्थिति को परिभाषित करता है और आपके द्वारा दिए गए मान के आधार पर संदेश की रंग योजना, आइकन और फ़ॉन्ट वजन निर्धारित करता है।

प्रकार प्रोप कई स्ट्रिंग मानों को स्वीकार करता है जैसे जटिल, ठोस, वाम-उच्चारण, शीर्ष उच्चारण, सही उच्चारण, और निचला उच्चारण. प्रत्येक मान अलर्ट संदेश की एक अलग दृश्य शैली का प्रतिनिधित्व करता है।

यहां अलग-अलग प्रकारों वाले चार अलर्ट घटकों का उदाहरण दिया गया है:

आयात प्रतिक्रिया से'प्रतिक्रिया';
आयात {अलर्ट, अलर्टआइकॉन, अलर्टडिस्क्रिप्शन, अलर्टटाइटल, फ्लेक्स} से'@चक्र-उई/प्रतिक्रिया'
समारोहअनुप्रयोग() {
वापस करना (



'केंद्र' अंतराल ='3' दिशा ='कॉलम' मीट्रिक टन ='4'>
'सफलता' वेरिएंट ='ठोस'>

आपका स्वागत है!!!</AlertTitle>
आपको यहां पाकर अच्छा लगा</AlertDescription>
 </Alert>

'सफलता' वेरिएंट ='जटिल'>

आपका स्वागत है!!!</AlertTitle>
आपको यहां पाकर अच्छा लगा</AlertDescription>
 </Alert>
'सफलता' वेरिएंट ='शीर्ष-उच्चारण'>

आपका स्वागत है!!!</AlertTitle>
आपको यहां पाकर अच्छा लगा</AlertDescription>
 </Alert>
'सफलता' वेरिएंट ='वाम-उच्चारण'>

आपका स्वागत है!!!</AlertTitle>
आपको यहां पाकर अच्छा लगा</AlertDescription>
 </Alert>
 </Flex>
 </div>
 )
}
निर्यातगलती करना अनुप्रयोग

ऊपर दिए गए कोड ब्लॉक को रेंडर करने पर कस्टम अलर्ट इस तरह प्रदर्शित होगा:

क्लासनाम प्रस्ताव का उपयोग करके अपने अलर्ट संदेशों को अनुकूलित करना

अलर्ट संदेशों के डिफ़ॉल्ट रूप से चिपके रहने के बजाय, आप इसका उपयोग करके इसे अनुकूलित कर सकते हैं कक्षा का नाम सहारा। आप उपयोग करें कक्षा का नाम एक सीएसएस वर्ग को परिभाषित करने और अलर्ट संदेश में अपनी कस्टम शैली लागू करने के लिए प्रोप।

उदाहरण के लिए:

आयात प्रतिक्रिया से'प्रतिक्रिया';
आयात {अलर्ट, अलर्टआइकॉन, अलर्टडिस्क्रिप्शन, अलर्टटाइटल} से'@चक्र-उई/प्रतिक्रिया'
समारोहअनुप्रयोग() {
वापस करना (



'सफलता' वर्गनाम ='चेतावनी'>

आपका स्वागत है!!!</AlertTitle>
आपको यहां पाकर अच्छा लगा</AlertDescription>
 </Alert>
 </div>
 )
}
निर्यातगलती करना अनुप्रयोग;

इस उदाहरण में, अलर्ट घटक में CSS वर्ग "अलर्ट" है। CSS क्लास को परिभाषित करने के बाद, आप अपनी CSS फ़ाइल में अपनी स्टाइल्स को परिभाषित कर सकते हैं।

जैसे इतना:

।चेतावनी {
 लाल रंग;
 फ़ॉन्ट-परिवार: कर्सिव;
 डिस्प्ले: फ्लेक्स;
 फ्लेक्स-दिशा: कॉलम;
 अंतर: 0.4रेम;
}

उपरोक्त कोड CSS शैलियों को अलर्ट घटक पर लागू करेगा। यदि आप चक्र यूआई स्टाइल प्रॉप्स से परिचित हैं, तो आपको उन्हें स्टाइल अलर्ट संदेशों के बजाय उपयोग करना चाहिए कक्षा का नाम सहारा।

उपरोक्त सीएसएस शैलियों को लागू करने के बाद, नीचे दी गई छवि के अनुसार चेतावनी घटक प्रदर्शित होगा:

उपयोगकर्ता घटनाओं के जवाब में चेतावनी संदेश ट्रिगर करना

आपने एक अलर्ट घटक बनाया है जो लगातार स्क्रीन पर एक अलर्ट संदेश प्रदर्शित करता है। हालाँकि, उपयोगकर्ता अनुभव को बढ़ाने के लिए, आप उपयोगकर्ता द्वारा शुरू की जाने वाली विशिष्ट घटनाओं के जवाब में अलर्ट संदेश को ट्रिगर कर सकते हैं, जावास्क्रिप्ट ईवेंट श्रोताओं का उपयोग करना. इन घटनाओं में एक बटन क्लिक करना, एक फॉर्म सबमिट करना, या एक त्रुटि का सामना करना शामिल हो सकता है।

घटनाओं के जवाब में अपने अलर्ट संदेश को ट्रिगर करने के लिए प्रतिक्रिया स्थिति और का उपयोग करें दिखाना चक्र यूआई घटकों का सहारा।

उदाहरण के लिए:

आयात प्रतिक्रिया से'प्रतिक्रिया';
आयात {अलर्ट, अलर्टआइकॉन, अलर्टडिस्क्रिप्शन, अलर्टटाइटल, बटन, क्लोजबटन} से'@चक्र-उई/प्रतिक्रिया'
समारोहअनुप्रयोग() {
कॉन्स्ट [डिस्प्ले, सेट डिस्प्ले] = रिएक्ट.यूजस्टेट ('कोई नहीं');
समारोहसूचित करें() {
 सेटडिस्प्ले('मोड़ना');
 }
समारोहबंद करना() {
 सेटडिस्प्ले('कोई नहीं');
 }
वापस करना (

"अनुप्रयोग">
'सफलता' डिस्प्ले = {डिस्प्ले} वेरिएंट ='ठोस'>

आपका स्वागत है!!!</AlertTitle>
आपको यहां पाकर अच्छा लगा</AlertDescription>
'शुद्ध' शीर्ष ='6 पीएक्स' सही ='6 पीएक्स' ऑनक्लिक = {बंद} />
 </Alert>

'4'> मुझे क्लिक करें</Button>
 </div>
 )
}
निर्यातगलती करना अनुप्रयोग

यह कोड ब्लॉक अधिसूचना प्रदर्शन की स्थिति का प्रबंधन करता है useState अंकुश। यह अधिसूचना प्रदर्शन की प्रारंभिक स्थिति को "कोई नहीं" पर सेट करता है, जो अधिसूचना को छुपाता है।

जब उपयोगकर्ता क्लिक करता है बटन, यह कॉल करता है सूचित करें समारोह। नोटिफ़िकेशन फ़ंक्शन को कॉल करने से का मान बदल जाता है दिखाना अधिसूचना को दृश्यमान बनाने के लिए "कोई नहीं" से "फ्लेक्स" बताएं।

जब उपयोगकर्ता क्लिक करता है बंद करें बटन, यह क्लोज फंक्शन को कॉल करता है। यह प्रदर्शन की स्थिति को वापस "कोई नहीं" में बदल देता है जो अधिसूचना को छुपाता है।

अब आप अनुकूलन योग्य अलर्ट बना सकते हैं

अब आप सीख गए हैं कि चक्र यूआई का उपयोग करके अपने रिएक्ट एप्लिकेशन में कस्टम अलर्ट कैसे बनाया जाता है। चक्र यूआई के साथ, रिएक्ट में कस्टम अलर्ट बनाना आसान और सहज है, जिससे हम अपने उपयोगकर्ताओं को स्पष्ट और संक्षिप्त जानकारी प्रदान कर सकते हैं। शानदार रिएक्ट एप्लिकेशन बनाने में आपकी मदद करने के लिए चक्र यूआई कई अन्य अनुकूलन योग्य और सुलभ यूआई घटक प्रदान करता है।