परिचय

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

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

इस लेख में, हम स्क्रैच से एक अनंत स्क्रॉल घटक बनाने जा रहे हैं। इसमें निम्नलिखित विषय शामिल होंगे:

• पर्यावरण सेटअप
• घटक का निर्माण
• सीएसएस जोड़ना
• अनंत स्क्रॉल को अनुकूलित करना

अब, आइए शुरू करें।

पर्यावरण सेटअप

हम बुनियादी रिएक्ट एप्लिकेशन बनाने के लिए सीआरए का उपयोग करने जा रहे हैं। आप यह कर सकते हैं कि मैं निम्नलिखित कमांड चला रहा हूं:

    npx create-react-app infinite-scroll

अगर आप Vite या NextJS करना चाहते हैं तो आप भी कर सकते हैं। मामूली बदलावों के अलावा बाकी चीजें वैसी ही रहेंगी.

नोट: इस कमांड को चलाने के लिए, आपके पास NodeJS पहले से इंस्टॉल होना चाहिए। इसके अलावा, सीआरए से कुछ अनावश्यक बॉयलरप्लेट कोड हटा दें।

हमें एपीआई से डेटा लाने के लिए एक निर्भरता की आवश्यकता होगी। रिएक्ट सेट करने के बाद, हम निम्नलिखित कमांड के साथ एक्सियोस इंस्टॉल कर सकते हैं:

    npm install axios

अब, हम घटक बनाने के लिए तैयार हैं।

ऐप घटक

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

यहां ऐप घटक के लिए कोड है:

App.js

    import "./App.css";
    import { useState, useEffect } from "react";
    import axios from "axios";
    import { MovieCard } from "./MovieCard";

    function App() {
      const [page, setPage] = useState(1); // for number of page in tmdb 
      const [data, setData] = useState([]); // storing the fetched data
      const [loading, setLoading] = useState(false); // for setting loading state

      // fetching and stroring the data in the state
      const fetchMovie = async () => {
        const URL = `https://api.themoviedb.org/3/movie/popular?language=en-US&page=${page}`;
        const data = await axios.get(URL, {
          headers: {
            Authorization:
              "Bearer API KEY",
            Accept: "application/json",
          },
        });
        setData((prevData) => [...prevData, ...data.data.results]); // we are going to add the new data to current data.
        setLoading(false);
      };

      // useEffecte for invoking the function at the start
      useEffect(() => {
        fetchMovie();
      }, [page]);

      return (
        

          

            Popular movies according to Tmdb
            

              {data.length > 1 &&
                data.map((item) => {
                  return (
                    
                  );
                })}
              {loading && 
Loading....
}
            
          
      );
    }

    export default App;

आप कोड को काफी हद तक समझ सकते हैं, जहां हम डेटा प्राप्त कर रहे हैं और इसे मूवीकार्ड घटक में एक प्रोप के रूप में पास कर रहे हैं।

प्रत्येक मूवी की जानकारी प्रदर्शित करने के लिए एक MovieCard.js घटक बनाएं।

MoveCard.js

    import React from "react";

    export const MovieCard = ({ title, description, imageURL, rating }) => {

      const imagePath = `https://image.tmdb.org/t/p/w500${imageURL}`; // poster image path URL 

      return (
        

          

            
{title}
            
{description}
            
{rating.toFixed(1)}⭐
          
        
      );
    };

यहां एप्लिकेशन का सीएसएस है:

App.css

    .App {
      text-align: center;
    }

    .App-header {
      background-color: #282c34;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 1em;
      font-size: calc(10px   2vmin);
      color: white;
    }

    .movieCardContainer{
      margin-top: 1em;
      display: flex;
      flex-direction: column;
      gap: 1em;
      width: 60%;
      max-width: 800px;
    }

    .movieCard{
      display: flex;
    }

    .movieInfo{
      margin-left: 1em;
      text-align: left;
    }

    p{
      font-size: 18px;
    }

अनंत स्क्रॉल

अब, आइए सबसे पहले समझें कि हम अनंत स्क्रॉल कैसे बनाने जा रहे हैं। इसके लिए हम स्क्रॉल बार स्थिति को देखने जा रहे हैं। जब स्क्रॉल बार की स्थिति पृष्ठ के अंत के ठीक ऊपर होती है, तो हम लोडिंग स्थिति को सत्य पर सेट करने जा रहे हैं।

हम एक और यूज़इफ़ेक्ट लाने जा रहे हैं जो पेज की स्थिति को 1 से बढ़ा देगा। एक बार पेज नंबर अपडेट हो जाने के बाद, शुरुआती यूज़इफ़ेक्ट जिसमें पेज एक निर्भरता के रूप में है, ट्रिगर हो जाएगा। यह डेटा लाने के लिए FetchMovie() फ़ंक्शन को लागू करेगा।

स्क्रॉल करने के लिए इवेंट लिस्टनर जोड़ना

सबसे पहले, हम यह जानने के लिए ईवन लिसन जोड़ने जा रहे हैं कि स्क्रॉल बार की स्थिति कब बदली है।

    window.addEventListener("scroll", handleScroll);

हैंडलस्क्रॉल

जब स्क्रॉल होता है, तो हम यह जांचने जा रहे हैं कि स्क्रॉल बार की वर्तमान स्थिति वेब पेज के नीचे (यानी कुल लंबवत स्क्रॉल करने योग्य क्षेत्र) के ठीक ऊपर है या नहीं। यदि हाँ तो हम लोडिंग की स्थिति को सत्य में बदल रहे हैं।

    const handleScroll = () => {
      if (document.body.scrollHeight - 300 

• स्क्रॉलहाइट: यह वह संपत्ति है जो सामग्री की कुल ऊंचाई लौटाती है, जिसमें वह हिस्सा भी शामिल है जो स्क्रीन पर दिखाई नहीं देता है। तो, यह कुल स्क्रॉल करने योग्य क्षेत्र होगा।
• स्क्रॉलवाई: यह वह संपत्ति है जो दस्तावेज़ को ऊपर से लंबवत स्क्रॉल किए गए पिक्सेल की संख्या लौटाती है। तो यह वह क्षेत्र होगा जिसे स्क्रॉल किया गया है।
• इनरहाइट: यह वह संपत्ति है जो ब्राउज़र के विंडोज सामग्री क्षेत्र की ऊंचाई लौटाती है। यह स्क्रॉलबार की चौड़ाई होगी. इसे स्क्रॉलवाई में जोड़ा गया है ताकि फ़ेच तब हो जब हम सामग्री तक पहुंचें न कि तब जब हमने सामग्री पास की हो। ## उपयोग प्रभाव

लोडिंग की स्थिति को सफलतापूर्वक बदलने के बाद, हम पृष्ठ संख्या को बढ़ाने के लिए एक यूज़इफेक्ट लागू कर सकते हैं। ताकि, मूवी डेटा प्राप्त किया जा सके।

    useEffect(() => {
      if (loading == true) {
        setPage((prevPage) => prevPage   1);
      }
    }, [loading]);

    // other useEffect that we already implemented

    useEffect(() => {
      fetchMovie();
    }, [page]);

इवेंट लिस्टनर का अनुकूलन

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

    // debounce function
    function debounce(func, delay) {
      let timeoutId;
      return function (...args) {
        if (timeoutId) {
          clearTimeout(timeoutId);
        }
        timeoutId = setTimeout(() => {
          func(...args);
        }, delay);
      };
    }

    // adding debounce to the eventListner
    window.addEventListener("scroll", debounce(handleScroll, 500));

यहां App.js का पूरा कोड है:

    import "./App.css";
    import { useState, useEffect } from "react";
    import axios from "axios";
    import { MovieCard } from "./MovieCard";

    function App() {
      const [page, setPage] = useState(1);
      const [data, setData] = useState([]);
      const [loading, setLoading] = useState(false);
      const fetchMovie = async () => {

        const URL = `https://api.themoviedb.org/3/movie/popular?language=en-US&page=${page}`;
        const data = await axios.get(URL, {
          headers: {
            Authorization:
              "Bearer API KEY",
            Accept: "application/json",
          },
        });
        setData((prevData) => [...prevData, ...data.data.results]);
        setLoading(false);
      };
      useEffect(() => {
        fetchMovie();
      }, [page]);

      const handleScroll = () => {
        if (
          document.body.scrollHeight - 300  {
            func(...args);
          }, delay);
        };
      }

      window.addEventListener("scroll", debounce(handleScroll, 500));

      useEffect(() => {
        if (loading == true) {
          setPage((prevPage) => prevPage   1);
        }
      }, [loading]);

      return (
        

          

            Popular movies according to Tmdb
            

              {data.length > 1 &&
                data.map((item) => {
                  return (
                    
                  );
                })}
              {loading && 
Loading....
}
            
          
      );
    }

    export default App;

यहां एप्लिकेशन की कार्यप्रणाली दर्शाने वाला GIF है।

निष्कर्ष

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

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