रिएक्ट-टोस्टिफाई का उपयोग करके रिएक्ट में कस्टम अलर्ट कैसे बनाएं

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

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

रिएक्ट टोस्टिफ़ाई स्थापित करना

अपने रिएक्ट प्रोजेक्ट में Toastify को स्थापित करने के लिए, इस कमांड को अपनी प्रोजेक्ट डायरेक्टरी में चलाएँ:

एनपीएम इंस्टॉल - प्रतिक्रिया सहेजें-toastify

टोस्टिफाई की स्थापना

Toastify पैकेज का उपयोग करने के लिए, आपको इसे इम्पोर्ट करना होगा टोस्टकंटेनर, सेंकना विधि, और पैकेज द्वारा प्रदान की गई CSS फ़ाइल के साथ।

टोस्टकंटेनर ऐप कंपोनेंट के अंदर बनाए गए सभी टोस्ट नोटिफिकेशन को स्टोर करता है।

आयात {टोस्टकंटनर, टोस्ट} से"प्रतिक्रिया-toastify";
आयात'प्रतिक्रिया-toastify/dist/ReactToastify.css';
समारोहअनुप्रयोग() {
वापस करना(



 </div>
 );
}

आप उपयोग कर सकते हैं सेंकना आपके रिएक्ट प्रोजेक्ट के लिए टोस्ट नोटिफिकेशन बनाने के तरीके:

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


सूचित करें</button>

 </div>
 );
}

इस कोड द्वारा जेनरेट किए गए बटन पर क्लिक करने पर कॉल आएगा toast.success विधि, इसे "हैलो देयर!" डोरी। यह एक टोस्ट अधिसूचना बनाएगा जो स्क्रीन पर संदेश प्रदर्शित करता है, जैसे:

ध्यान दें कि विभिन्न प्रकार के टोस्ट तरीके हैं जिन्हें आप कॉल कर सकते हैं, जैसे टोस्ट.इन्फो (), टोस्ट त्रुटि (), टोस्ट.सफलता (), टोस्ट.चेतावनी (). संदेश के प्रकार को दर्शाने के लिए इन विधियों में से प्रत्येक में कुछ सूक्ष्म रंग शैली है।

अपने टोस्ट नोटिफिकेशन को पोजिशन करना

डिफ़ॉल्ट रूप से, टोस्ट सूचनाएँ वेब ऐप की स्क्रीन के शीर्ष-दाईं ओर से पॉप अप होती हैं। आप पर स्थिति गुण सेट करके इसे बदल सकते हैं टोस्टकंटेनर. छह स्थिति मान उपलब्ध हैं: टॉप-राइट, टॉप-सेंटर, टॉप-लेफ्ट, बॉटम-राइट, बॉटम-सेंटर और बॉटम-लेफ्ट।

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

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


सूचित करें</button>
"बाएं से बाएं"/>
 </div>
 );
}

पोजीशन प्रॉप को पर सेट करना टोस्टकंटेनर शीर्ष-बाईं ओर यह सुनिश्चित करता है कि सभी टोस्ट सूचनाएं स्क्रीन के शीर्ष-बाईं ओर से पॉप अप होती हैं।

आप अलग-अलग टोस्ट नोटिफिकेशन के लिए स्थिति प्रोप का उपयोग करके डिफ़ॉल्ट स्थिति बदल सकते हैं सेंकना तरीके:

समारोहअनुप्रयोग() {
कॉन्स्ट सूचित करना = () => टोस्ट.सफलता ("नमस्ते!", {पद: सेंकना। स्थिति.TOP_CENTER});
वापस करना(


सूचित करें</button>
"बाएं से बाएं"/>
 </div>
 );
}

आप टोस्ट सूचनाएं भी रख सकते हैं सीएसएस स्थिति संपत्ति का उपयोग करना, लेकिन Toastify का पोजीशन प्रॉप ऐसा करने का मानक तरीका है।

टोस्ट विधि और टोस्टकंटनर के ऑटोक्लोज़ प्रोप को संभालना

आप टोस्ट सूचनाओं का प्रदर्शन समय बदल सकते हैं। आप यह नियंत्रित कर सकते हैं कि टोस्ट अधिसूचना कितनी देर तक खुली रहती है स्वतः सहारा। आप सभी टोस्ट सूचनाओं और व्यक्तिगत-विशिष्ट टोस्ट सूचनाओं के लिए विलंब समय बदल सकते हैं। स्वतः प्रोप केवल बूलियन मान को गलत या मिलीसेकंड में एक अवधि स्वीकार करता है।

सभी टोस्ट सूचनाओं के विलंब समय को बदलने के लिए, का उपयोग करें स्वतः के भीतर सहारा टोस्टकंटेनर तत्व।

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

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


सूचित करें</button>
5000}/>
 </div>
 );
}

उपरोक्त सेटिंग्स के साथ, सभी टोस्ट सूचनाएँ ठीक पाँच सेकंड (5,000 मिलीसेकंड) के लिए प्रदर्शित होंगी।

का उपयोग स्वतः प्रत्येक की संपत्ति सेंकना विधि, आप व्यक्तिगत टोस्ट सूचनाओं के लिए विलंब समय को अनुकूलित कर सकते हैं।

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

समारोहअनुप्रयोग() {
कॉन्स्ट सूचित करें एक = () => टोस्ट.इन्फो ("10 सेकंड में बंद हो जाएगा", {स्वतः: 10000});
कॉन्स्ट सूचित दो = () => टोस्ट.इन्फो ("15 सेकंड में बंद हो जाएगा", {स्वतः: 15000});
वापस करना (


एक को सूचित करें </button>
दो सूचित करें</button>

 </div>
 );
}

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

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

समारोहअनुप्रयोग() {
कॉन्स्ट सूचित करना = () => टोस्ट.इन्फो ("नमस्ते!");
वापस करना (


सूचित करें</button>
असत्य} />
 </div>
 );
}

सेटिंग करना स्वतः व्यक्ति का सहारा सेंकना करने के तरीके असत्य यह भी सुनिश्चित करेगा कि वे विशिष्ट टोस्ट सूचनाएं डिफ़ॉल्ट रूप से बंद न हों।

Toastify के साथ नॉन-स्ट्रिंग नोटिफिकेशन रेंडर करना

टोस्ट नोटिफिकेशन के साथ काम करते समय आप स्ट्रिंग्स, रिएक्शन कंपोनेंट्स और नंबर्स को नोटिफिकेशन मैसेज के तौर पर रेंडर कर सकते हैं। रिएक्ट कंपोनेंट को टोस्ट नोटिफिकेशन के रूप में रेंडर करने के लिए, आप कंपोनेंट बनाते हैं और इसका इस्तेमाल करके रेंडर करते हैं सेंकना तरीका।

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

समारोहसंदेश({टोस्टप्रॉप्स, क्लोज़टोस्ट}) {
वापस करना (


{toastProps.position} में आपका स्वागत है/p>
</button>
 </div>
 )
}
निर्यातगलती करना संदेश;

यह कोड ब्लॉक एक घटक बनाता है, संदेश. किसी घटक को अधिसूचना के रूप में प्रस्तुत करते समय, टोस्ट जोड़ता है toastProps और closeToast आपके घटक के लिए सहारा। closeToast प्रोप एक ऐसा कार्य है जिसका उपयोग आप अधिसूचना को बंद करने के लिए कर सकते हैं। toastProps प्रोप गुणों वाली एक वस्तु है जो टोस्ट अधिसूचना के विवरण को उसकी स्थिति, प्रकार और अन्य विशेषताओं सहित संग्रहीत करती है।

संदेश घटक आयात करें, फिर इसे टोस्ट () फ़ंक्शन में पास करें, इसे टोस्ट अधिसूचना के रूप में प्रस्तुत करें:

आयात {टोस्टकंटनर, टोस्ट} से"प्रतिक्रिया-toastify";
आयात'प्रतिक्रिया-toastify/dist/ReactToastify.css';
आयात संदेश से"./घटक/संदेश";
समारोहअनुप्रयोग() {
कॉन्स्ट संदेश = () => सेंकना(<संदेश />);
वापस करना (


स्वागत</button>

 </div>
 );
}

बटन पर क्लिक करने से आपकी स्क्रीन पर प्रदर्शित होने के लिए एक प्रश्न और दो बटन वाली सूचना दिखाई देगी।

स्टाइलिंग टोस्ट सूचनाएं

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

अपनी टोस्ट सूचना को शैलीबद्ध करने के लिए, इसे a कक्षा का नाम और CSS फ़ाइल में अनुकूलन लागू करें.

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

समारोहअनुप्रयोग() {
कॉन्स्ट सूचित करना = () => टोस्ट.सफलता ("नमस्ते!", {कक्षा का नाम: "टोस्ट-संदेश"});
वापस करना (


सूचित करें</button>
"शीर्ष केंद्र" />
 </div>
 );
}

साथ कक्षा का नाम आपकी अधिसूचना से जुड़ा हुआ है, आप सीएसएस फ़ाइल के अंदर टोस्ट अधिसूचना को अपनी वरीयता में स्टाइल कर सकते हैं:

.toast-message {
पृष्ठभूमि का रंग: #000000;
रंग: #FFFFFF;
फ़ॉन्ट आकार: 20पिक्सल;
गद्दी: 1रेम 0.5रेम;
}

उपरोक्त कस्टम स्टाइल के परिणामस्वरूप, अधिसूचना इस तरह दिखाई देगी:

आपके वेब एप्लिकेशन के लिए टोस्ट सूचनाएं

अब आप रिएक्ट-टोस्टिफाई पैकेज और इसके उपलब्ध तरीकों का उपयोग करके रिएक्ट में कस्टम अलर्ट बना सकते हैं। इन कस्टम अलर्ट/नोटिफिकेशन को अपनी पसंद के अनुसार स्टाइल करके, आप अपने वेब एप्लिकेशन के उपयोगकर्ता अनुभव को बढ़ा सकते हैं।

रिएक्ट-टोस्टिफाई आपके रिएक्ट प्रोजेक्ट में बिना किसी झंझट के कस्टम अलर्ट शामिल करने के लिए एक त्वरित और प्रभावी तरीका प्रदान करता है।