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

रिएक्ट में कई तृतीय-पक्ष पैकेज उपलब्ध हैं जो अधिसूचना घटक बनाने में आपकी सहायता कर सकते हैं। हालाँकि, यदि आप केवल एक साधारण अधिसूचना घटक चाहते हैं, तो आप अपने आवेदन में अनावश्यक निर्भरता जोड़ने से बचने के लिए अपना स्वयं का बनाना चाह सकते हैं।

परियोजना की स्थापना

आप रिएक्ट ऐप को सेट करने के लिए Vite का उपयोग करें. वाइट एक बिल्ड टूल है जो आपको एक रिएक्ट प्रोजेक्ट को जल्दी से मचान बनाने देता है।

आरंभ करने के लिए, नीचे दिए गए कमांड को चलाकर एक नया Vite प्रोजेक्ट बनाने के लिए यार्न पैकेज मैनेजर का उपयोग करें।

यार्न वाइट बनाते हैं

कमांड आपको एक प्रोजेक्ट नाम दर्ज करने के लिए कहेगा। प्रोजेक्ट का नाम दर्ज करें और एंटर दबाएं। अगला, यह आपको एक रूपरेखा का चयन करने के लिए कहेगा। चुनना प्रतिक्रिया और एंटर दबाएं। अंत में, यह आपको एक संस्करण चुनने के लिए कहेगा, चुनें जावास्क्रिप्ट और फिर एंटर दबाएं।

इस ट्यूटोरियल द्वारा उपयोग किए जाने वाले कॉन्फ़िगरेशन यहां दिए गए हैं:

Vite द्वारा प्रोजेक्ट बनाने के बाद, प्रोजेक्ट फ़ोल्डर में नेविगेट करें और कोड संपादक का उपयोग करके इसे खोलें।

फिर आप निम्न आदेश चलाकर विकास सर्वर प्रारंभ कर सकते हैं।

यार्न देव

यह आपके डिफ़ॉल्ट ब्राउज़र में आपका नया रिएक्ट एप्लिकेशन खोलेगा http://localhost: 5173/.

अधिसूचना घटक डिजाइन करना

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

यहां विभिन्न विविधताएं हैं जिन्हें अधिसूचना घटक प्रस्तुत करने में सक्षम होना चाहिए।

आप घटक को सहारा देकर इसे प्राप्त कर सकते हैं जो प्रस्तुत करने के लिए अधिसूचना के प्रकार, शीर्षक और विवरण पाठ को निर्दिष्ट करता है। इन प्रॉप्स का उपयोग करके, आप घटक को अनुकूलित कर सकते हैं और न्यूनतम प्रयास के साथ इसे अपने पूरे एप्लिकेशन में पुन: उपयोग कर सकते हैं। यदि आपको रंगमंच की सामग्री पर पुनश्चर्या की आवश्यकता है, तो यहाँ एक लेख है जो समझाता है रिएक्ट में प्रॉप्स का उपयोग कैसे करें.

अधिसूचना घटक बनाना

में स्रोत फ़ोल्डर, नाम से एक नई फ़ाइल बनाएँ अधिसूचना .jsx और निम्न कोड जोड़ें।

निर्यातगलती करनासमारोहअधिसूचना({प्रकार, शीर्षक, विवरण}) {
वापस करना (


 {/* अधिसूचना सामग्री */}
 </div>
 )
}

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

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

यार्न प्रतिक्रिया-आइकन जोड़ें

फिर आइकनों को शीर्ष पर आयात करें अधिसूचना अवयव।

आयात {RxCross2, RxInfoCircled} से"प्रतिक्रिया-प्रतीक/rx"

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

निर्यातगलती करनासमारोहअधिसूचना({प्रकार, शीर्षक, विवरण}) {
वापस करना (







{शीर्षक}</div>
{विवरण}</div>
 </div>
 </div>

 </div>
 )
}

अगला कदम यह है कि इसमें पारित प्रकार के आधार पर इसे स्टाइल करना है।

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

आरंभ करने के लिए, नामक एक नई फ़ाइल बनाएँ अधिसूचना। सीएसएस और इसे आयात करें अधिसूचना .jsx शीर्ष पर निम्न कोड जोड़कर।

आयात "./notification.css"

में फिर अधिसूचना। सीएसएस अधिसूचना घटक के लिए आधार शैलियों को परिभाषित करें:

।अधिसूचना {
दिखाना: मोड़ना;
फ्लेक्स-दिशा: पंक्ति;
संरेखित-आइटम: फ्लेक्स-स्टार्ट;
गद्दी: 8पिक्सल;
}
.सूचना__छोड़ दिया {
दिखाना: मोड़ना;
फ्लेक्स-दिशा: पंक्ति;
गद्दी: 0पिक्सल;
अंतर: 8पिक्सल;
मार्जिन-सही: 24पिक्सल;
}
.सूचना__सामग्री {
दिखाना: मोड़ना;
फ्लेक्स-दिशा: कॉलम;
संरेखित-आइटम: फ्लेक्स-स्टार्ट;
गद्दी: 0पिक्सल;
}
.सूचना__शीर्षक {
फुहारा परिवार: "अंतर";
लिपि शैली: सामान्य;
फ़ॉन्ट वजन: 500;
फ़ॉन्ट आकार: 14पिक्सल;
}
.सूचना__विवरण {
फुहारा परिवार: "अंतर";
लिपि शैली: सामान्य;
फ़ॉन्ट वजन: 400;
फ़ॉन्ट आकार: 12पिक्सल;
गद्दी: 0;
}

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

.सूचना__सफलता {
पृष्ठभूमि: #f6fef9;
सीमा: 1पिक्सलठोस#2f9461;
बॉर्डर-त्रिज्या: 8पिक्सल;
}
.सूचना__त्रुटि {
पृष्ठभूमि: #fffbfa;
सीमा: 1पिक्सलठोस#cd3636;
बॉर्डर-त्रिज्या: 8पिक्सल;
}
.सूचना__चेतावनी {
पृष्ठभूमि: #fffcf5;
सीमा: 1पिक्सलठोस#c8811a;
बॉर्डर-त्रिज्या: 8पिक्सल;
}

उपरोक्त कोड अधिसूचना कंटेनर को पास किए गए प्रकार के आधार पर स्टाइल करता है।

शीर्षक को अनुकूलित करने के लिए, निम्न शैलियों का उपयोग करें।

.सूचना__शीर्षक__सफलता {
रंग: #2f9461;
}
.सूचना__शीर्षक__चेतावनी {
रंग: #c8811a;
}
.सूचना__शीर्षक__त्रुटि {
रंग: #cd3636;
}

कस्टम वर्णन टेक्स्ट के लिए, इन शैलियों का उपयोग करें।

.सूचना__विवरण__सफलता {
रंग: #53ख483;
}
.सूचना__विवरण__चेतावनी {
रंग: #e9a23b;
}
.सूचना__विवरण__त्रुटि {
रंग: #f34141;
}

और आइकनों के लिए, निम्न वर्गों का उपयोग करें।

.notification_icon_error {
रंग: #cd3636;
}
.notification__icon__success {
रंग: #2f9461;
}
.notification__icon__warning {
रंग: #c8811a;
}

फिर, में अधिसूचना घटक, आप सशर्त रूप से उपयुक्त वर्ग के आधार पर आवेदन कर सकते हैं प्रकार प्रोप, इस तरह:

निर्यातगलती करनासमारोहअधिसूचना({प्रकार, शीर्षक, विवरण}) {
वापस करना (
`अधिसूचना अधिसूचना__${प्रकार}`}>
`अधिसूचना__बाएं`}>
`सूचना__icon__${प्रकार}`}/>
"अधिसूचना__सामग्री">
`अधिसूचना__शीर्षक सूचना__शीर्षक__${प्रकार}`}>{शीर्षक</div>
`अधिसूचना__विवरण अधिसूचना__विवरण__${प्रकार}`}>{विवरण</div>
 </div>
 </div>
`सूचना__icon__${प्रकार}`}/>
 </div>
 )
}

इस घटक में, आप इस प्रकार के आधार पर गतिशील रूप से कक्षा निर्धारित कर रहे हैं अधिसूचना__सफलता या अधिसूचना__त्रुटि.

इसे कार्रवाई में देखने के लिए, अधिसूचना घटक को इसमें आयात करें ऐप.जेएसएक्स और इसे इस प्रकार प्रयोग करें:

आयात अधिसूचना से'।/अधिसूचना'
समारोहअनुप्रयोग() {
वापस करना (
 <>
 टाइप ="सफलता"
 शीर्षक ="कार्य पूरा हो गया"
 विवरण ="आपका कार्य सफलतापूर्वक पूरा हो गया है।"
 />
 </>
 )
}
निर्यातगलती करना अनुप्रयोग

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

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

अधिसूचना घटक में अन्तरक्रियाशीलता जोड़ना

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