रिएक्ट में स्टिकी हैडर कैसे बनाएं

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

आप स्वयं कस्टम कोड लिखकर या किसी तृतीय-पक्ष लाइब्रेरी का उपयोग करके अपनी रिएक्ट साइट पर एक चिपचिपा हेडर जोड़ सकते हैं।

स्टिकी हैडर क्या है?

स्टिकी हेडर एक हेडर है जो स्क्रीन के शीर्ष पर स्थिर रहता है क्योंकि उपयोगकर्ता पृष्ठ को नीचे स्क्रॉल करता है। उपयोगकर्ता के स्क्रॉल करते समय महत्वपूर्ण जानकारी को दृश्यमान रखने के लिए यह उपयोगी हो सकता है।

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

स्टिकी हैडर बनाना

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

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

निम्न कोड एक चिपचिपा हेडर घटक बनाता है और इसे CSS का उपयोग करके स्टाइल करता है।

आयात प्रतिक्रिया, {useState, useEffect} से 'प्रतिक्रिया';
समारोहस्टिकी हैडर() {
कॉन्स्ट [isSticky, setSticky] = useState (असत्य);
कॉन्स्ट हैंडलस्क्रॉल = () => {
कॉन्स्ट विंडोस्क्रॉलटॉप = खिड़की.scrollY;
 अगर (विंडोस्क्रॉलटॉप > 10) {
 सेटस्टिकी(सत्य);
 } अन्य {
 सेटस्टिकी(असत्य);
 }
 };
 उपयोग प्रभाव (() => {
 विंडो.ऐडइवेंट लिस्टनर ('स्क्रॉल', हैंडलस्क्रॉल);
वापस करना () => {
 window.removeEventListener ('स्क्रॉल', हैंडलस्क्रॉल);
 };
 }, []);
कॉन्स्ट आइटम = [
 {
 नाम: 'घर',
 जोड़ना: '/'
 },
 {
 नाम: 'के बारे में',
 जोड़ना: '/about'
 },
 {
 नाम: 'संपर्क',
 जोड़ना: '/contact'
 }
 ];
कॉन्स्ट डेटा = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]
वापस करना (
<डिव क्लासनाम ="अनुप्रयोग">
<शीर्षलेख शैली = {{पृष्ठभूमि: चिपचिपा है? '#फफ्फ': '', चौड़ाई: '100%', जेडइंडेक्स: '999', स्थिति: चिपचिपा है ?'हल किया गया':'शुद्ध' }}>
 {आइटम.मैप (आइटम => (
<a href={item.link} key={item.name}>
 {आइटम नाम}
</ए>
 ))}
</header>
<उल>
 {डेटा.मैप ((एक्स) => {
 वापस करना (<ली कुंजी = {एक्स}>{एक्स}</li>)
 })}
</ul>
</div>
 );
}
निर्यातगलती करना स्टिकी हैडर;

यह विधि इनलाइन स्टाइलिंग का उपयोग करती है, लेकिन आप CSS कक्षाओं का भी उपयोग कर सकते हैं। उदाहरण के लिए:

।चिपचिपा {
 स्थिति: निश्चित;
 शीर्ष: 0;
 चौड़ाई: 100%;
 जेड-इंडेक्स: 999;
}

परिणामी पृष्ठ इस तरह दिखेगा:

अतिरिक्त सुविधाओं

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

बैक-टू-टॉप बटन जोड़ने के लिए आप निम्न कोड का उपयोग कर सकते हैं।

आयात प्रतिक्रिया, {useState, useEffect} से 'प्रतिक्रिया';
समारोहस्टिकी हैडर() {
कॉन्स्ट [isSticky, setSticky] = useState (असत्य);
कॉन्स्ट [showBackToTop, setShowBackToTop] = useState(असत्य);
कॉन्स्ट हैंडलस्क्रॉल = () => {
कॉन्स्ट विंडोस्क्रॉलटॉप = खिड़की.scrollY;
 अगर (विंडोस्क्रॉलटॉप > 10) {
 सेटस्टिकी(सत्य);
 सेट शोबैक टू टॉप (सत्य);
 } अन्य {
 सेटस्टिकी(असत्य);
 सेट शोबैक टू टॉप (असत्य);
 }
 };
कॉन्स्ट स्क्रॉलटॉप = () => {
खिड़की.scrollTo({
 शीर्ष: 0,
 व्यवहार: 'चिकना'
 });
 };
 उपयोग प्रभाव (() => {
 विंडो.ऐडइवेंट लिस्टनर ('स्क्रॉल', हैंडलस्क्रॉल);
वापस करना () => {
 window.removeEventListener ('स्क्रॉल', हैंडलस्क्रॉल);
 };
 }, []);
कॉन्स्ट आइटम = [
 {
 नाम: 'घर',
 जोड़ना: '/'
 },
 {
 नाम: 'के बारे में',
 जोड़ना: '/about'
 },
 {
 नाम: 'संपर्क',
 जोड़ना: '/contact'
 }
 ];
कॉन्स्ट डेटा = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]
वापस करना (
<डिव क्लासनाम ="अनुप्रयोग">
<शीर्षलेख शैली = {{पृष्ठभूमि: चिपचिपा है? '#फफ्फ': '', चौड़ाई: '100%', जेडइंडेक्स: '999', स्थिति: चिपचिपा है ?'हल किया गया':'शुद्ध' }}>
 {आइटम.मैप (आइटम => (
<a href={item.link} key={item.name}>
 {आइटम नाम}
</ए>
 ))}
</header>
<उल>
 {डेटा.मैप ((एक्स) => {
 वापस करना (<ली कुंजी = {एक्स}>{एक्स}</li>)
 })}
</ul>
<डिव>
 {showBackToTop && (
<बटन onClick={scrollToTop}>वापस शीर्ष पर</button>
 )}</div>
</div>
 );
}
निर्यातगलती करना स्टिकी हैडर;

यह कोड एक चिपचिपा हेडर घटक बनाता है और इसे CSS का उपयोग करके स्टाइल करता है। आप भी कर सकते हैं Tailwind CSS का उपयोग करके घटक को स्टाइल करें.

वैकल्पिक तरीके

स्टिकी हेडर बनाने के लिए आप थर्ड-पार्टी लाइब्रेरी का भी उपयोग कर सकते हैं।

प्रतिक्रिया-चिपचिपा का उपयोग करना

प्रतिक्रिया-चिपचिपा पुस्तकालय आपको प्रतिक्रिया में चिपचिपा तत्व बनाने में मदद करता है। प्रतिक्रिया-चिपचिपा का उपयोग करने के लिए, पहले इसे स्थापित करें:

NPM स्थापित करना प्रतिक्रिया-चिपचिपा

फिर, आप इसे इस तरह इस्तेमाल कर सकते हैं:

आयात प्रतिक्रिया से 'प्रतिक्रिया';
आयात {स्टिकीकंटेनर, स्टिकी} से 'प्रतिक्रिया-चिपचिपा';
समारोहअनुप्रयोग() {
कॉन्स्ट डेटा = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]
वापस करना (
<डिव>
<स्टिकीकंटेनर>
<चिपचिपा>{({शैली}) => (
<शीर्षक शैली = {शैली}>
 यह है एक चिपचिपा शीर्षलेख
</header>
 )}
</Sticky>
<उल>
 {डेटा.मैप ((एक्स) => {
 वापस करना (<ली कुंजी = {एक्स}>{एक्स}</li>)
 })}
</ul>
</StickyContainer>
</div>
 );
}
निर्यातगलती करना अनुप्रयोग;

उपरोक्त कोड में, आपको सबसे पहले प्रतिक्रिया-चिपचिपा पुस्तकालय से स्टिकीकंटनर और स्टिकी घटकों को आयात करने की आवश्यकता है।

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

इसके बाद, उस तत्व के आस-पास चिपचिपा घटक जोड़ें जिसे आप चिपचिपा बनाना चाहते हैं। इस मामले में, वह हैडर तत्व है।

अंत में, स्टिकी कंपोनेंट में स्टाइल प्रोप जोड़ें। यह हेडर को सही स्थिति में रखेगा।

प्रतिक्रिया-स्टिकिनोड का उपयोग करना

रिएक्ट-स्टिकिनोड एक अन्य लाइब्रेरी है जो आपको रिएक्ट में चिपचिपा तत्व बनाने में मदद करती है।

रिएक्शन-स्टिकिनोड का उपयोग करने के लिए, पहले इसे इंस्टॉल करें:

NPM स्थापित करना प्रतिक्रिया-स्टिकिनोड

तब आप इसे इस तरह इस्तेमाल कर सकते हैं:

आयात प्रतिक्रिया से 'प्रतिक्रिया';
आयात चिपचिपा से 'प्रतिक्रिया-स्टिकिनोड';
समारोहअनुप्रयोग() {
कॉन्स्ट डेटा = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36 ]
वापस करना (
<डिव>
<स्टिकी इनेबल्ड = {ट्रू} बॉटम बाउंड्री = {1200}>
<डिव>
 यह है एक चिपचिपा शीर्षलेख
</div>
</Sticky>
<उल>
 {डेटा.मैप ((एक्स) => {
 वापस करना (<ली कुंजी = {एक्स}>{एक्स}</li>)
 })}
</ul>
</div>
 );
}
निर्यातगलती करना अनुप्रयोग;

प्रतिक्रिया-स्टिकिनोड लाइब्रेरी से स्टिकी घटक आयात करके प्रारंभ करें।

फिर, उस तत्व के आस-पास चिपचिपा घटक जोड़ें जिसे आप चिपचिपा बनाना चाहते हैं। इस मामले में, हेडर को उसके चारों ओर स्टिकी घटक जोड़कर चिपचिपा बनाएं।

अंत में, स्टिकी घटक में सक्षम और बॉटमबाउंड्री प्रॉप्स जोड़ें। सक्षम प्रोप यह सुनिश्चित करेगा कि हेडर चिपचिपा है, और बॉटम बाउंड्री प्रोप यह सुनिश्चित करेगा कि यह पृष्ठ के बहुत नीचे नहीं जाता है।

उपयोगकर्ता अनुभव में सुधार करें

स्टिकी हेडर के साथ, उपयोगकर्ता के लिए यह ट्रैक खोना आसान हो सकता है कि वे पृष्ठ पर कहां हैं। स्टिकी हेडर मोबाइल उपकरणों पर विशेष रूप से समस्याग्रस्त हो सकते हैं, जहां स्क्रीन छोटी होती है।

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

जब आप तैयार हों, तो आप अपने रिएक्ट ऐप को गिटहब पेज पर मुफ्त में तैनात कर सकते हैं।