SweetAlert का उपयोग करके रिएक्ट में कस्टम नोटिफिकेशन कंपोनेंट कैसे बनाएं

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

स्वीटअलर्ट लाइब्रेरी स्थापित करना

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

के माध्यम से स्थापित कर सकते हैं एनपीएम पैकेज मैनेजर अपने टर्मिनल में निम्न कमांड चलाकर:

npm स्वीटअलर्ट स्थापित करें --save

सूचनाएँ बनाने के लिए SweetAlert का उपयोग करना

SweetAlert लाइब्रेरी का उपयोग करके अपने रिएक्ट ऐप में कस्टम नोटिफिकेशन बनाना समान है Toastify लाइब्रेरी का उपयोग करना. स्वाल SweetAlert लाइब्रेरी द्वारा प्रदान किया गया फ़ंक्शन अधिसूचना घटक का एक उदाहरण बनाता है और अधिसूचना के गुणों को परिभाषित करता है।

यहाँ उपयोग करने का एक उदाहरण है स्वाल () अधिसूचना घटक बनाने के लिए कार्य:

आयात प्रतिक्रिया से'प्रतिक्रिया'
आयात स्वाल से'स्वीट अलर्ट'
समारोहअनुप्रयोग() {
कॉन्स्ट सूचित करना = () => स्वाल ('नमस्ते');
वापस करना (



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

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

स्वाल फ़ंक्शन तीन पैरामीटर लेता है। पहला पैरामीटर अधिसूचना का शीर्षक है, दूसरा पैरामीटर संदेश है, और तीसरा आपकी अधिसूचना में प्रदर्शित होने वाला आइकन है।

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

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

आयात प्रतिक्रिया से'प्रतिक्रिया'
आयात स्वाल से'स्वीट अलर्ट'
समारोहअनुप्रयोग() {
कॉन्स्ट सूचित करना = () => स्वाल ('नमस्ते', 'मेरे पृष्ठ पर स्वागत है', 'सफलता');
वापस करना (



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

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

का उपयोग करने का एक विकल्प स्वाल तीन मापदंडों के साथ समारोह का उपयोग करना होगा स्वाल ऑब्जेक्ट पैरामीटर के साथ कार्य करें। इस ऑब्जेक्ट पैरामीटर में ऐसे गुण होते हैं जो अधिसूचना घटक को परिभाषित करते हैं।

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

आयात प्रतिक्रिया से'प्रतिक्रिया'
आयात स्वाल से'स्वीट अलर्ट'
समारोहअनुप्रयोग() {
कॉन्स्ट सूचित करना = () => स्वाल (
 {
 शीर्षक: 'नमस्ते',
 मूलपाठ: 'मेरे पृष्ठ पर स्वागत है',
 चिह्न: 'सफलता',
 बटन: 'ठीक है',
 }
 );
वापस करना (



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

उपरोक्त कोड ब्लॉक में, स्वाल समारोह निम्नलिखित गुणों के साथ एक वस्तु लेता है: शीर्षक, मूलपाठ, आइकन, और बटन.

शीर्षक संपत्ति अधिसूचना का शीर्षक निर्दिष्ट करती है, जबकि मूलपाठ संपत्ति संदेश को परिभाषित करती है। साथ आइकन संपत्ति, आप अधिसूचना में प्रदर्शित आइकन के प्रकार को निर्दिष्ट कर सकते हैं।

अंत में, बटन संपत्ति अधिसूचना में प्रदर्शित बटन के पाठ को निर्दिष्ट करती है। इस स्थिति में, बटन पाठ प्रदर्शित करता है ठीक.

बटन संपत्ति को अनुकूलित करना

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

एक डिफ़ॉल्ट बटन में निम्नलिखित गुण होते हैं:

स्वाल (
 {
 बटन: {
 मूलपाठ: "ठीक है",
 कीमत: सत्य,
 दृश्यमान: सत्य,
 कक्षा का नाम: "",
 बंद मोडल: सत्य
 },
 }
 );

उपरोक्त कोड ब्लॉक में, बटन के साथ निम्नलिखित गुणों का उपयोग किया जाता है:

• मूलपाठ: बटन पर प्रदर्शित होने वाला पाठ।
• कीमत: उपयोगकर्ता द्वारा बटन पर क्लिक करने पर लौटाया जाने वाला मान। इस मामले में, मूल्य है सत्य.
• दृश्यमान: बूलियन मान इंगित करता है कि बटन दिखाई देना चाहिए या नहीं।
• कक्षा का नाम: बटन पर लागू करने के लिए सीएसएस वर्ग का प्रतिनिधित्व करने वाली एक स्ट्रिंग।
• closeModal: एक बूलियन मान जो दर्शाता है कि बटन क्लिक करने पर मोडल को बंद किया जाना चाहिए या नहीं।

आप के साथ एक सरणी का उपयोग करके एक से अधिक बटन भी प्रस्तुत कर सकते हैं बटन संपत्ति। सरणी इसके तत्वों के रूप में तार लेगी।

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

स्वाल (
 {
 बटन: ["रद्द करना", "ठीक है"],
 }
 );

इस उदाहरण में, आपके सूचना घटक में टेक्स्ट के साथ दो बटन होंगे' रद्द करना और ठीक. सेटिंग करना बटन संपत्ति को असत्य बिना बटन के एक अधिसूचना प्रस्तुत करेगा।

अधिसूचना घटक के अंदर HTML तत्वों का प्रतिपादन

आप सूचना के रूप में सादे स्ट्रिंग्स के अलावा HTML तत्वों को भी प्रस्तुत कर सकते हैं। यह अनुकूलन विकल्पों की एक विस्तृत श्रृंखला प्रदान करता है।

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

आयात प्रतिक्रिया से'प्रतिक्रिया'
आयात स्वाल से'स्वीट अलर्ट'
समारोहअनुप्रयोग() {
कॉन्स्ट सूचित करना = () => स्वाल (
 {
 संतुष्ट: {
 तत्व: 'इनपुट',
 गुण: {
 प्लेसहोल्डर: 'पहला नाम',
 प्रकार: 'मूलपाठ'
 }
 },
 बटन: 'साइन अप करें'
 }
 )
वापस करना (

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

इस उदाहरण में, आप का उपयोग करें संतुष्ट प्लेसहोल्डर टेक्स्ट के साथ इनपुट फ़ील्ड प्रस्तुत करने की संपत्ति।

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

जब आप बटन तत्व पर क्लिक करते हैं तो उपरोक्त कोड ब्लॉक नीचे दी गई अधिसूचना प्रस्तुत करेगा।

अधिसूचना घटक को स्टाइल करना

SweetAlert लाइब्रेरी द्वारा प्रदान की गई डिफ़ॉल्ट सूचना बॉक्स शैली का पालन करने के बजाय, आप सूचना बॉक्स के स्वरूप को इसके द्वारा अनुकूलित कर सकते हैं अपनी स्वयं की CSS शैलियों को लागू करना.

आप प्रयोग करेंगे कक्षा का नाम संपत्ति अधिसूचना में अपनी शैलियों को जोड़ने के लिए। कक्षा का नाम संपत्ति अधिसूचना के लिए एक सीएसएस वर्ग को परिभाषित करती है।

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

स्वाल (
 {
 शीर्षक: 'नमस्ते',
 मूलपाठ: 'मेरे पृष्ठ पर स्वागत है',
 बटन: असत्य,
 कक्षा का नाम: 'चेतावनी',
 }
 )

उपरोक्त कोड ब्लॉक में अधिसूचना में एक है कक्षा का नाम कीमत चेतावनी. अधिसूचना बनाने और परिभाषित करने के बाद कक्षा का नाम, आप अपनी CSS शैलियों को परिभाषित करेंगे:

।चेतावनी{
पृष्ठभूमि का रंग: हरा;
फुहारा परिवार: कर्सिव;
बॉर्डर-त्रिज्या: 15पिक्सल;
}

ऊपर दी गई CSS शैलियाँ रेंडर की सूचना पर लागू होंगी:

अधिसूचना घटक को बंद करना

SweetAlert लाइब्रेरी आपकी सूचनाओं को बंद करने के तरीके को अनुकूलित करने के लिए कई विकल्प प्रदान करती है। ये विकल्प हैं closeOnEsc, CloseOnClickOutside, और घड़ी गुण।

closeOnEsc संपत्ति यह निर्धारित करती है कि जब उपयोगकर्ता अपने कीबोर्ड पर Esc कुंजी दबाता है तो अधिसूचना बॉक्स बंद हो जाता है या नहीं। closeOnEsc संपत्ति एक बूलियन मान लेती है।

स्वाल (
 {
 ...,
 क्लोजऑनईएससी: असत्य,
 }
 )

डिफ़ॉल्ट रूप से, closeOnEsc संपत्ति पर सेट है सत्य. उपरोक्त कोड ब्लॉक में, आप सेटिंग कर रहे हैं closeOnEsc संपत्ति को असत्य. संपत्ति को सेट करके असत्य, उपयोगकर्ता Esc कुंजी दबाकर सूचना बॉक्स को बंद नहीं कर सकता।

आप यह भी निर्धारित कर सकते हैं कि उपयोगकर्ता बॉक्स के बाहर क्लिक करके सूचना बॉक्स को बंद कर सकता है या नहीं CloseOnClickOutside संपत्ति।

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

स्वाल (
 {
 ...,
 क्लोज़ऑनक्लिकआउटसाइड: असत्य,
 }
 )

साथ घड़ी संपत्ति, आप अधिसूचना बॉक्स के लिए स्वचालित रूप से खुद को बंद करने के लिए समय सीमा निर्धारित कर सकते हैं। घड़ी गुण मिलीसेकंड में एक पूर्णांक मान लेता है।

स्वाल (
 {
 ...,
 टाइमर: 5000,
 }
 )

इस उदाहरण में, घड़ी संपत्ति पर सेट है 5000. अधिसूचना केवल 5 सेकंड के लिए दिखाई देगी।

SweetAlert का उपयोग करते हुए कुशल कस्टम सूचनाएं

SweetAlert एक शक्तिशाली लाइब्रेरी है जिसका उपयोग करके आप रिएक्ट एप्लिकेशन में अनुकूलित सूचनाएं बना सकते हैं। पुस्तकालय का उपयोग करना स्वाल फ़ंक्शन, अब आप कस्टम गुणों और व्यवहार के साथ सूचनाएँ बना सकते हैं। आप रिएक्ट एप्लिकेशन में कस्टम अलर्ट बनाने के लिए रिएक्ट-टोस्टिफाई जैसे अन्य पुस्तकालयों का भी उपयोग कर सकते हैं।