Pagination चाहे कहीं भी लगाने हो किसी भी technology की सहायता से लगाने हो आसान नहीं होते हैं क्योंकि इनमें काफ़ी ध्यान रखना होता है user के point of view से और अगर बात की जाए साथ में animation लगाने की तो यह काम और भी मुस्किल लगने लगता है |
लेकिन जितना हम सोच रहे हैं उतना मुस्किल ये है नहीं बस छोटी मोटी tricks होती हैं जिनकी सहायता से यह काम काफ़ी आसान बन सकता हैं |
तो दोस्तों आज के आर्टिकल में हम बात करने वाले हैं की आप React में Pagination के साथ Animation कैसे लगा सकते हैं इसलिए आज के आर्टिकल को शुरू से लेकर अंतः तक ज़रूर पढ़ें |
कुछ चीजें आपको समझनी जरूरी है जैसे की Pagination क्या होते हैं और Pagination का इस्तेमाल क्यो किया है तो इनके बारे में पहले बात कर लेते हैं |
Pagination क्या होते हैं?
दोस्तों pagination सिर्फ़ नंबर होते हैं जो की 1 से शुरू होते हैं और आगे कितने भी हो सकते हैं और यह एक प्रक्रिया है जो कि ज़्यादा content या ज़्यादा डेटा को एक साथ एक ही पेज पर दिखाने की बजाय अलग-अलग भागों में दिखाया जाता है |
pagination का इस्तेमाल आमतौर पर वेबसाइटों जैसे कि सर्च रिजल्ट पर, कोई articles या फिर कोई e-commerce product listing आदि पर किया जाता है |
इसका सबसे बड़ा example आप google पर देख सकते हैं, आप कुछ भी अगर गूगल पेज सर्च करते हैं तो एक पेज पर आपको सिर्फ दस रिजल्ट ही दिखाई देते हैं और बाक़ी रिजल्ट देखने के लिए आपको pagination number पर क्लिक करना होता है तो इन्हें ही pagination कहा जाता है |
Pagination की जरूरत क्यों है?
इस बात के कई कारण है क्योंकि इसके काफ़ी फायदे होते हैं जिनके बारे में नीचे detail में बताया गया है |
Performance
अगर आप पूरा कंटेंट एक साथ ना दिखाकर उसे अलग-अलग भागों में pagination के ज़रिए दिखाते हैं तो इससे आपके पेज पर ज़्यादा load नहीं होगा और आपके पेज का लोडिंग टाइम काफ़ी कम होगा जिससे पेज स्पीड काफ़ी बढ़ सकती है जो की Performance में सबसे बड़ा कारण माना जाता है |
Experience
pagination से यूजर को नेविगेट करने में काफ़ी ज़्यादा आसानी होती है जैसे की अगर हम किसी भी ऑनलाइन स्टोर पर देखते हैं जहाँ प्रोडक्ट लिस्ट होते हैं वहाँ दूसरे पेज पर प्रोडक्ट देखने के लिए pagination लगे होते हैं जिनकी सहायता से नेविगेट करना काफ़ी आसान हो जाता है |
और अगर मान लो की कहीं किसी Amazone या Flipkart जैसी वेबसाइट पर pagination ना हो तो यूजर को अनंत तक स्क्रॉल करना पड़ेगा जिससे यूजर का Experience काफ़ी ज़्यादा ख़राब बन जाएगा |
Other
इनके अलावा और भी कई कारण है,
- Pagination जो है वो search engines को भी काफ़ी सहायता करते हैं पेज को अच्छे से read करके index करने में जिससे page के rank होने के chances बढ़ सकते हैं |
- इसके अलावा ज़्यादा डेटा को manage करना काफ़ी आसान बन जाता है pagination की help से |
- Pagination से यूजर इनफार्मेशन को टुकड़ो में देखता है जिससे यूजर बोर नहीं होता है |
React Pagination
pagination लगाने के लिए आपको logic build करना होगा जो की हमारे example में reviews हैं, यानी की यह सब depend करता है कि हम कितने review दिखा रहे हैं एक पेज पर उसके आधार पर पेज नंबर बढ़ते हैं या फिर घटते हैं |
यह आप कैलकुलेशन कर के कर सकते हैं जैसे की आप code example में code देख सकते हैं |
अब आगे बात कर लेते हैं एनीमेशन की तो आपको एक div add करनी होगी pagination number के parent में जिसमें slide effect लगाने के लिए पहले इसको absolute रखना होगा और उसके बाद जैसे ही आपके number change होते हैं click पर उसके अनुसार इस div को left से transform करना है जितनी number की width है उसके according.
जैसे की अपने example में slider (currentPage – 1) * 54px. से move हो रहा है क्योंकि number की width 40px है और बाक़ी इसके बिच का gap हो गया |
जैसे की –
- पहले पेज पर slider की पोजीशन है 0px.
- दूसरे पेज पर 54px.
- तीसरे पेज पर 108px.
और ऐसे करते करते आगे बढ़ती रहेगी और अगर यूजर लास्ट से first में आ रहा है तो यह value घटती रहेगी |
इसके अलावा आप एक advance react pagination का ब्लॉग पढ़ सकते हैं जो कि dev.to ने लिखा है |
Conclusion
React में Pagination को Animation के साथ जोड़ना आपके यूजर एक्सपीरियंस को और भी बेहतर बनाता है | इस ब्लॉग में, हमने जाना कि कैसे React में आप custom CSS से animation लगाकर पेजिनेशन इफेक्ट बना सकते हैं |
अगर आप अपनी React ऐप में यूजर इंटरैक्शन को बेहतर बनाना चाहते हैं, तो पेजिनेशन में एनिमेशन जोड़ना एक बेहतरीन तरीका हो सकता है |
उम्मीद है दोस्तों कि यह ट्यूटोरियल आपको अपने प्रोजेक्ट में मदद करेगा! अगर आपके कोई सवाल हैं या आप अपनी राय share करना चाहते हैं, तो कमेंट में जरूर बताएं। 🚀