10+ परफेक्ट रिएक्ट इनफिनिट स्क्रॉल कंपोनेंट उदाहरण

समस्याओं को खत्म करने के लिए हमारे साधन का प्रयास करें

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

में प्रतिक्रिया अनुप्रयोगों में, स्क्रॉल स्थिति की निगरानी करके और अंत के करीब आने पर एपीआई एंडपॉइंट या डेटाबेस से प्रोग्रामेटिक रूप से अधिक आइटम लोड करके अनंत स्क्रॉल प्राप्त किया जा सकता है। हालाँकि, पूर्व-निर्मित का लाभ उठाकर अनंत स्क्रॉल घटकों पर प्रतिक्रिया करें आप पहिये का पुनः आविष्कार करना छोड़ सकते हैं और विकास में तेजी ला सकते हैं।

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

1. रिएक्ट इनफिनिट स्क्रोलर

रिएक्ट इनफिनिट स्क्रॉलर किसी पृष्ठ पर लंबवत और क्षैतिज अनंत स्क्रॉल को आसानी से जोड़ने के लिए एक मजबूत रिएक्ट घटक है। छवियों/फ़ोटो के साथ-साथ सामान्य सूची-आधारित सामग्री फ़ीड दोनों के लिए डिज़ाइन किया गया।

इंस्टालेशन

एनपीएम के साथ स्थापित करें:

|_+_|

प्रयोग

आयात करें और प्रस्तुत करें |_+_| घटक, चाइल्ड तत्वों को पास करना, |_+_| होने पर अधिक सामग्री लोड करना क्या सच है:

|_+_|

रंगमंच की सामग्री

प्रोप प्रकार गलती करना विवरण
डेटा लंबाई संख्या वस्तुओं की कुल संख्या
अगला समारोह जब अधिक आइटम लोड करने की आवश्यकता हो तो कॉलबैक करें
उसके पास अधिक हैं बूलियन असत्य क्या लोड करने के लिए और भी आइटम हैं
लोडर प्रतिक्रिया तत्व लोड करते समय प्रस्तुत किया जाने वाला तत्व
स्क्रॉलथ्रेशोल्ड डोरी '100px' लोडिंग शुरू करने के लिए नीचे से निकटता

डेमो

लाइव डेमो और उदाहरण देखें गिटहब पेज


2. प्रतिक्रिया अनंत स्क्रॉल घटक

ऊर्ध्वाधर, क्षैतिज, उलटा, पृष्ठांकित और लंबन अनंत स्क्रॉल व्यवस्था के लिए @sghall से एक उच्च प्रदर्शन प्रतिक्रिया घटक।

इंस्टालेशन

एनपीएम पैकेज:

|_+_|

प्रयोग

आयात करें और प्रस्तुत करें |_+_| दोहराए गए आइटम तत्वों के चारों ओर लपेटा गया, अधिक लोड हो रहा है जब |_+_|:

|_+_|

रंगमंच की सामग्री

प्रोप प्रकार गलती करना विवरण
डेटा लंबाई संख्या वर्तमान में लोड की गई वस्तुओं की गिनती
अगला समारोह जब अधिक आइटम लोड करने की आवश्यकता हो तो कॉलबैक करें
उसके पास अधिक हैं बूलियन यदि सत्य है, तो अधिक आइटम लोड किए जा सकते हैं
लोडर तत्व लोडिंग के दौरान दिखाने के लिए घटक
स्क्रॉलथ्रेशोल्ड डोरी '100px' अधिक लोड करने के लिए नीचे से निकटता

डेमो

पर इंटरैक्टिव उदाहरण GitHub


3. प्रतिक्रिया अनंत

@Canner से लाइट-वेट रिएक्ट अनंत स्क्रॉल घटक जो लोडिंग एनिमेशन, थ्रेशोल्ड ट्रैकिंग और स्क्रॉल कंटेनर को संभालता है।

इंस्टालेशन

|_+_|

प्रयोग

|_+_|

रंगमंच की सामग्री

प्रोप प्रकार गलती करना विवरण
हैंडलस्क्रॉल समारोह अधिक सामग्री कॉलबैक लोड करने को ट्रिगर करें
तत्व ऊँचाई सरणी [] दृश्यमान सीमा निर्धारित करने के लिए तत्वों की पिक्सेल ऊँचाई
कंटेनरहाइट संख्या पिक्सेल में स्क्रॉल करने योग्य कंटेनर की ऊंचाई
WindowsAsScrollContainer का उपयोग करें बूलियन असत्य तत्व के बजाय विंडो स्क्रॉल सुनें
डिस्प्लेबॉटमअपवर्ड बूलियन असत्य स्क्रॉल दिशा को उल्टा करें

डेमो

देखना जीवंत उदाहरण GitHub पेज पर.


4. रिएक्ट इनफिनिट स्क्रॉल हुक

@डेमेसियो से अनंत स्क्रॉल के लिए लाइट-वेट रिएक्ट हुक जो स्क्रॉल इवेंट, लोडिंग ट्रिगर्स और थ्रेसहोल्ड को संभालता है।

इंस्टालेशन

|_+_|

प्रयोग

|_+_|

विकल्प

विकल्प प्रकार आवश्यक विवरण
रूटमार्जिन स्ट्रिंग नहीं तत्व के प्रकट होने से पहले लोड करना शुरू करने के लिए उसके चारों ओर मार्जिन
सीमा संख्या नहीं अधिक लोडिंग को ट्रिगर करने के लिए स्क्रॉल किया गया प्रतिशत
hasNextPage बूलियन हाँ यदि सत्य है, तो अधिक सामग्री लोड की जा सकती है
onLoadMore समारोह हाँ अगला पेज लोड होने पर कॉलबैक करें
लोड हो रहा है बूलियन नहीं यदि सत्य है, तो घटक अगले पृष्ठ पर लोड हो रहा है

डेमो

देखना GitHub उदाहरण के लिए।


5. रिएक्ट-वर्चुअलाइज्ड अनंत लोडर

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

इंस्टालेशन

|_+_|

प्रयोग

|_+_|

रंगमंच की सामग्री

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

डेमो

देखना उदाहरण प्रतिक्रिया-वर्चुअलाइज्ड के साथ


6. रिएक्ट इनफिनिट हिट

GitHub पर @sonaye से उद्यमों के लिए अनंत स्क्रॉल लाइब्रेरी लचीले डेटा लाने पर केंद्रित है।

इंस्टालेशन

|_+_|

प्रयोग

|_+_|

रंगमंच की सामग्री

प्रोप प्रकार आवश्यक विवरण
लाना समारोह हाँ अधिक वस्तुएँ लाने की विधि
सीमा संख्या नहीं लाने को ट्रिगर करने के लिए नीचे से पिक्सेल की निकटता
आप LIMIT संख्या नहीं प्रति फ़ेच लौटाए जाने वाले आइटमों की संख्या
लोडर अवयव नहीं लाने के दौरान प्रदर्शित होने वाला तत्व प्रगति पर है
उसके पास अधिक हैं बूलियन नहीं यदि सभी आइटम पहले ही लोड हो चुके हैं
कैप्चर का उपयोग करें बूलियन नहीं स्क्रॉल श्रोता कैप्चर चरण का उपयोग करता है

डेमो

देखना GitHub उदाहरण के लिए।


7. प्रतिक्रिया-आसान-अनंत-स्क्रॉल

अल्ट्रा-लाइट रिएक्ट अनंत स्क्रॉल हुक जो स्क्रॉल इवेंट, थ्रेशोल्ड और दिशाओं को सुचारू रूप से संभालता है।

इंस्टालेशन

|_+_|

प्रयोग

|_+_|

विकल्प

विकल्प प्रकार आवश्यक विवरण
कार्रवाई समारोह हाँ अगला पेज लोड होने पर कॉलबैक करें
उसके पास अधिक हैं बूलियन हाँ यदि सत्य है, तो अधिक सामग्री मौजूद है
सीमा संख्या नहीं लोडिंग को ट्रिगर करने के लिए प्रतिशत स्क्रॉल किया गया
स्क्रॉलकंटेनर तत्व नहीं स्क्रॉल श्रोता संलग्न करने के लिए तत्व
दिशा डोरी नहीं 'ऊपर' या 'नीचे' स्क्रॉल दिशा
debounce बूलियन नहीं डिबाउंसिंग स्क्रॉल हैंडलर सक्षम करें

8. रिएक्ट इनफिनिट स्क्रॉल ट्रिगर

प्रतिक्रिया-अनंत-स्क्रॉल-घटक से लोडिंग क्रियाओं को ट्रिगर करने के लिए लाइट रैपर।

इंस्टालेशन

|_+_|

प्रयोग

|_+_|

विकल्प

विकल्प प्रकार आवश्यक विवरण
कार्रवाई समारोह हाँ अगले आइटम लोड होने पर कॉलबैक करें
ओफ़्सेट संख्या नहीं प्रारंभिक ट्रिगर नीचे से पिक्सेल को ऑफसेट करता है

के साथ प्रयोग के लिए डिज़ाइन किया गया प्रतिक्रिया-अनंत-स्क्रॉल-घटक


9. प्रतिक्रिया सूची अनंत स्क्रॉल

@कोडर1011 से प्रतिक्रिया सूचियों के लिए घोषणात्मक अनंत स्क्रॉल।

इंस्टालेशन

|_+_|

प्रयोग

|_+_|

रंगमंच की सामग्री

प्रोप प्रकार आवश्यक विवरण
डेटा प्राप्त करें समारोह हाँ अधिक डेटा लाने की विधि
आइटम प्रस्तुत करें समारोह हाँ प्रत्येक आइटम को प्रस्तुत करता है
लंबाई संख्या हाँ वस्तुओं की कुल संख्या
आप LIMIT संख्या नहीं प्रति लोड लाने हेतु वस्तुओं की संख्या
चौड़ाई डोरी नहीं वैकल्पिक निश्चित चौड़ाई शैली

डेमो

देखना GitHub पर उदाहरण .


10. रिएक्ट विंडो इनफिनिटलोडर

प्रतिक्रिया-विंडो में परिवर्तनीय आकार के तत्वों के लिए अनंत लोडिंग घटक।

इंस्टालेशन

|_+_|

प्रयोग

|_+_|

रंगमंच की सामग्री

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

डेमो

देखना उदाहरण GitHub पर.


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

यह सभी देखें: