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

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

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

रिएक्ट-पेजिनेट लाइब्रेरी का परिचय

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

नीचे, आप देखेंगे कि आप एपीआई से प्राप्त डेटा को पृष्ठांकित करने के लिए प्रतिक्रिया-पेजिनेट का उपयोग कैसे कर सकते हैं।

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

शुरू करने के लिए, create-react-app कमांड या Vite का उपयोग करके एक रिएक्ट प्रोजेक्ट बनाएं। यह ट्यूटोरियल Vite का उपयोग करता है। आप इस पोस्ट में इसके बारे में निर्देश प्राप्त कर सकते हैं

instagram viewer
Vite के साथ रिएक्ट प्रोजेक्ट कैसे सेट करें.

प्रोजेक्ट बना लेने के बाद, App.jsx में से कुछ सामग्री हटा दें, ताकि यह इस कोड से मेल खाए:

समारोहअनुप्रयोग() {
वापस करना (
 </div>
 );
}
निर्यातगलती करना अनुप्रयोग;

यह आपको प्रतिक्रिया-पेजिनेट के साथ काम करना शुरू करने के लिए एक साफ फाइल देता है।

डेटा की स्थापना

आप JSON प्लेसहोल्डर API से डेटा प्राप्त करेंगे। यह एपीआई पोस्ट, टिप्पणियों, एल्बम, फोटो, टूडोस और उपयोगकर्ताओं के लिए अंतिम बिंदु प्रदान करता है। पोस्ट समापन बिंदु के माध्यम से, आप करेंगे Axios का उपयोग करके API से डेटा प्राप्त करें, एक HTTP क्लाइंट लाइब्रेरी।

आरंभ करने के लिए, इस टर्मिनल कमांड का उपयोग करके Axios इंस्टॉल करें:

एनपीएम अक्षीय स्थापित करें

इसके बाद, useEffect हुक और axios लाइब्रेरी को सबसे ऊपर इम्पोर्ट करें ऐप.जेएसएक्स, फिर नीचे दिखाए गए अनुसार एपीआई से पोस्ट प्राप्त करें।

आयात axios से"अक्षीय";
आयात {उपयोग प्रभाव, उपयोग स्थिति} से"प्रतिक्रिया";
समारोहअनुप्रयोग() {
कॉन्स्ट [डेटा, सेटडाटा] = यूज़स्टेट ([]);

 उपयोग प्रभाव (() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts')।तब((जवाब) => {
 सेटडेटा (प्रतिक्रिया.डेटा);
 });
 }, []);


वापस करना (


 </div>
 );
}
निर्यातगलती करना अनुप्रयोग;

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

प्रतिक्रिया-पेजिनेट के साथ पेजिनेशन लागू करना

अब जब आपने प्रोजेक्ट सेट कर लिया है और डेटा प्राप्त कर लिया है, तो प्रतिक्रिया-पेजिनेट का उपयोग करके पेजिनेशन जोड़ने का समय आ गया है। नीचे वे चरण दिए गए हैं जिनका आपको पालन करना चाहिए:

1. प्रतिक्रिया-पेजिनेट स्थापित करें

प्रतिक्रिया-पेजिनेट को स्थापित करने के लिए निम्नलिखित कमांड चलाएँ एनपीएम का उपयोग करना.

npm रिएक्ट-पेजिनेट स्थापित करें

2. पृष्ठों की प्रारंभिक स्थिति सेट करें

वर्तमान पृष्ठ और पृष्ठों की कुल संख्या पर नज़र रखने के लिए useState हुक का उपयोग करें।

कॉन्स्ट [वर्तमान पृष्ठ, सेट वर्तमान पृष्ठ] = उपयोगस्टेट (0);
कॉन्स्ट [टोटलपेज, सेटटोटलपेज] = यूज़स्टेट (0);

आपको यह भी निर्दिष्ट करना चाहिए कि एक पृष्ठ में कुल कितने आइटम हो सकते हैं।

कॉन्स्ट आइटम्सपरपेज = 10

डेटा लंबाई और प्रति पृष्ठ आइटम की संख्या के आधार पर पृष्ठों की कुल संख्या की गणना करने के लिए उपयोग प्रभाव हुक में निम्न पंक्ति जोड़ें। फिर इसे टोटलपेज स्टेट वेरिएबल में स्टोर करें।

सेटटोटलपेज(गणित.ceil (response.data.length / itemsPerPage));

आपका उपयोग प्रभाव हुक अब इस तरह दिखना चाहिए:

उपयोग प्रभाव (() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts')।तब((जवाब) => {
 सेटडेटा (प्रतिक्रिया.डेटा);
 सेटटोटलपेज(गणित.ceil (response.data.length / itemsPerPage))
 });
 }, []);

3. पृष्ठ परिवर्तनों को संभालने के लिए एक फ़ंक्शन को परिभाषित करें

वर्तमान पृष्ठ संख्या के आधार पर डेटा के सबसेट को प्रस्तुत करने के लिए सबसे पहले startIndex, endIndex और सबसेट चर परिभाषित करें।

कॉन्स्ट स्टार्टइंडेक्स = करंटपेज * आइटम्सपरपेज;
कॉन्स्ट एंडइंडेक्स = स्टार्टइंडेक्स + आइटम्सपरपेज;
कॉन्स्ट सबसेट = डेटा.स्लाइस (स्टार्टइंडेक्स, एंडइंडेक्स);

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

फिर हैंडल पेज चेंज फ़ंक्शन जोड़ें। यह एक ईवेंट हैंडलर है जो तब चलेगा जब कोई उपयोगकर्ता नेक्स्ट बटन पर क्लिक करेगा।

कॉन्स्ट हैंडल पेज चेंज = (चयनित पृष्ठ) => {
 setCurrentPage (चयनितPage.selected);
};

कुल मिलाकर, आपका आवेदन इस तरह दिखना चाहिए:

आयात axios से"अक्षीय";
आयात {उपयोग प्रभाव, उपयोग स्थिति} से"प्रतिक्रिया";
समारोहअनुप्रयोग() {
कॉन्स्ट [डेटा, सेटडाटा] = यूज़स्टेट ([]);
कॉन्स्ट [वर्तमान पृष्ठ, सेट वर्तमान पृष्ठ] = उपयोगस्टेट (0);
कॉन्स्ट [टोटलपेज, सेटटोटलपेज] = यूज़स्टेट (0);
कॉन्स्ट आइटम्सपरपेज = 10;


 उपयोग प्रभाव (() => {
 axios.get(' https://jsonplaceholder.typicode.com/posts/')।तब((जवाब) => {
 सेटडेटा (प्रतिक्रिया.डेटा);
 });


 सेटटोटलपेज(गणित.ceil (response.data.length / itemsPerPage));
 }, []);


कॉन्स्ट स्टार्टइंडेक्स = करंटपेज * आइटम्सपरपेज;
कॉन्स्ट एंडइंडेक्स = स्टार्टइंडेक्स + आइटम्सपरपेज;
कॉन्स्ट सबसेट = डेटा.स्लाइस (स्टार्टइंडेक्स, एंडइंडेक्स);


कॉन्स्ट हैंडल पेज चेंज = (चयनित पृष्ठ) => {
 setCurrentPage (चयनितPage.selected);
 };


वापस करना (


 </div>
 );
}
निर्यातगलती करना अनुप्रयोग;

4. पेजिनेशन जोड़ें

अंतिम चरण ReactPaginate घटक का उपयोग करके पृष्ठों को रेंडर करना है। निम्नलिखित को रिटर्न स्टेटमेंट में जोड़ें, खाली की जगह डिव.



 {सबसेट.नक्शा((वस्तु) => (
{आइटम.शीर्षक</div>
 ))}
 पेजकाउंट = {कुल पेज}
 onPageChange={handlePageChange}
 बल पृष्ठ = {वर्तमान पृष्ठ}
 />
</div>

यह वर्तमान उपसमुच्चय में आइटमों पर पुनरावृति करता है और उन्हें रेंडर करता है और पेजकाउंट, ऑनपेज चेंज, और फोर्स चेंज प्रॉप्स को रिएक्टपैगिनेट में पास करता है।

प्रतिक्रिया-पेजिनेट को अनुकूलित करना

प्रतिक्रिया-पेजिनेट कई प्रॉप्स प्रदान करता है जो आपको अपने एप्लिकेशन की जरूरतों को पूरा करने के लिए पेजिनेशन घटक के रंगरूप को अनुकूलित करने की अनुमति देता है।

यहां कुछ उदाहरण दिए गए हैं।

  • पिछले लेबल और अगले लेबल प्रॉप्स का उपयोग करके अगले और पिछले बटनों को अनुकूलित करें। उदाहरण के लिए, आप शेवरॉन लेबल का उपयोग नीचे दिखाए अनुसार कर सकते हैं।
     पिछला लेबल = {"<}
     अगला लेबल = {">>"}
    />
  • ब्रेक लेबल प्रॉप का उपयोग करके ब्रेक लेबल को अनुकूलित करें। ब्रेक लेबल वह लेबल होता है जो तब प्रदर्शित होता है जब पृष्ठों की संख्या अधिक होती है, और पेजिनेशन घटक सभी पेज लिंक प्रदर्शित करने में सक्षम नहीं होता है। इसके बजाय, यह लिंक के बीच, ब्रेक लेबल द्वारा दर्शाए गए ब्रेक को प्रदर्शित करता है। यहाँ एक उदाहरण है जो इलिप्सिस का उपयोग करता है।
     ब्रेक लेबल = {"..."}
    />
  • प्रदर्शित करने के लिए पृष्ठों की संख्या को अनुकूलित करें। यदि आप सभी पृष्ठों को प्रदर्शित नहीं करना चाहते हैं, तो आप पेजकाउंट प्रोप का उपयोग करके पृष्ठों की संख्या निर्दिष्ट कर सकते हैं। नीचे दिया गया कोड पृष्ठ संख्या को 5 के रूप में निर्दिष्ट करता है।
     पृष्ठ संख्या = {5}
    />
  • कंटेनर और सक्रिय कक्षाओं को अनुकूलित करना। आप क्रमशः कंटेनर क्लासनाम और सक्रिय क्लासनाम प्रोप का उपयोग करके पेजिनेशन कंटेनर और सक्रिय पेज लिंक के लिए क्लास नामों को कस्टमाइज़ कर सकते हैं। आप तब तक इन वर्गों का उपयोग करके पेजिनेशन घटक को स्टाइल कर सकते हैं जब तक कि यह आपके ऐप के रूप में फिट न हो जाए।
     कंटेनर क्लासनाम = {"पेजिनेशन-कंटेनर"}
     सक्रिय क्लासनाम = {"सक्रिय पृष्ठ"}
    />

यह उपलब्ध अनुकूलन विकल्पों की विस्तृत सूची नहीं है। आप बाकी में पा सकते हैं रिएक्शन-पेजिनेट लाइब्रेरी डॉक्स.

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

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

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