प्रतिक्रिया में टोस्टर के साथ आकर्षक सूचनाएं बनाना

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

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

सबसे पहले, एक रिएक्ट एप्लिकेशन बनाकर शुरुआत करें जिसके साथ आप काम करेंगे। तुम कर सकते हो Vite का उपयोग करके एक रिएक्ट एप्लिकेशन बनाएं.

एप्लिकेशन बनाने के बाद इंस्टॉल करें टोस्टर अपने टर्मिनल में निम्नलिखित कमांड चलाकर अपने प्रोजेक्ट में पैकेज बनाएं:

npm install --save toastr

अब आपने इंस्टॉल कर लिया है टोस्टर पैकेज और सूचनाएं प्रदर्शित करने के लिए इसका उपयोग कर सकते हैं।

टोस्टर का उपयोग करके सूचनाएं बनाना

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

@import'toastr';

यहां एक उदाहरण दिया गया है कि आप इसका उपयोग करके अधिसूचना कैसे बनाते हैं टोस्टर समारोह:

import React from"react";
import toastr from"toastr";
functionApp() {
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome");
 };
return (



Click Me</button>
 </div>
 );
}
exportdefault App;

इस उदाहरण में, आप परिभाषित करते हैं a सूचित करें समारोह। मुझे क्लिक करें बटन कॉल करता है सूचित करें जब आप उस पर क्लिक करेंगे तो कार्य करें। सूचित करें फ़ंक्शन का उपयोग करता है टोस्टर.सफलता सफलता अधिसूचना प्रदर्शित करने का कार्य।

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

जब आप क्लिक करेंगे तो निम्न छवि के समान एक अधिसूचना दिखाई देगी मुझे क्लिक करें बटन।

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

उदाहरण के लिए, जब आप उपयोग करते हैं टोस्टर.त्रुटि फ़ंक्शन, आपकी अधिसूचना इस तरह दिखेगी:

अपनी सूचनाओं को अनुकूलित करना

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

यहाँ एक उदाहरण है:

import React from"react";
import toastr from"toastr";
functionApp() {
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome", {
 closeButton: true,
 progressBar: true,
 timeOut: 3000,
 positionClass: "toast-top-center",
 showMethod: "fadeIn",
 hideMethod: "fadeOut",
 });
 };
return (



Click Me</button>
 </div>
 );
}
exportdefault App;

अधिसूचना को अनुकूलित करने के लिए, यह कोड उपयोग करता है बंद करेंबटन, प्रोगेस बार, समय समाप्त, स्थितिवर्ग, showMethod, और छुपाने की विधि विकल्प ऑब्जेक्ट के गुण। बंद करेंबटन संपत्ति यह निर्धारित करती है कि आपकी अधिसूचना बंद बटन के साथ प्रदर्शित होगी या नहीं। यह एक बूलियन मान स्वीकार करता है।

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

स्थितिवर्ग संपत्ति आपकी स्क्रीन पर अधिसूचना की स्थिति को परिभाषित करती है। यह आठ पूर्व-परिभाषित मानों को स्वीकार करता है। मूल्यों में शामिल हैं:

• टोस्ट-ऊपर-दाएं: आपकी स्क्रीन के ऊपरी दाएं कोने में अधिसूचना प्रदर्शित करता है।
• टोस्ट-ऊपर-बाएँ: अधिसूचना आपकी स्क्रीन के ऊपरी बाएँ कोने में प्रदर्शित होगी।
• टोस्ट-शीर्ष-केंद्र: अधिसूचना आपकी स्क्रीन के शीर्ष केंद्र में दिखाई देगी।
• टोस्ट-नीचे-दाएं: आपको अपनी स्क्रीन के निचले दाएं कोने में अधिसूचना दिखाई देगी।
• टोस्ट-नीचे-बाएँ: अधिसूचना आपकी स्क्रीन के निचले बाएँ कोने में रखी गई है।
• टोस्ट-नीचे-केंद्र: आपको अधिसूचना स्क्रीन के निचले मध्य में मिलेगी।
• टोस्ट-शीर्ष-पूर्ण-चौड़ाई: अधिसूचना आपकी स्क्रीन के शीर्ष पर दिखाई देती है, जिससे स्क्रीन की पूरी चौड़ाई भर जाती है।
• टोस्ट-नीचे-पूर्ण-चौड़ाई: अधिसूचना आपकी स्क्रीन की पूरी चौड़ाई भरती है और नीचे प्रदर्शित होती है।

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

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

यह कुछ इस तरह दिखेगा.

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

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

import React from"react";
import toastr from"toastr";
functionApp() {
 toastr.options = {
 closeButton: true,
 progressBar: true,
 positionClass: "toast-top-right",
 timeOut: 5000,
 showMethod: "fadeIn",
 hideMethod: "fadeOut",
 };
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome");
 };
const displayError = () => {
 toastr.error("You ran into an error", "Sorry");
 };
return (



Click Me</button>
Error</button>
 </div>
 );
}
exportdefault App;

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

एप्लिकेशन को चलाने और बटनों पर क्लिक करने से एक इंटरफ़ेस प्रस्तुत होगा जो नीचे दी गई छवि जैसा दिखेगा।

अपनी सूचनाओं को इंटरएक्टिव बनाएं

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

इसका उपयोग कैसे करें इसका एक उदाहरण यहां दिया गया है क्लिक पर संपत्ति:

import React from"react";
import toastr from"toastr";
functionApp() {
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome", {
 onclick: () => {
 toastr.clear();
 },
 });
 };
return (



Click Me</button>
 </div>
 );
}
exportdefault App;

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

टोस्टर का उपयोग करके आकर्षक सूचनाएं बनाएं

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