React JS में अनंत स्क्रोलिंग जोड़ें 🔥

ReactJS में अनगिनत स्क्रोलिंग जोड़ने के लिए निम्नलिखित ट्यूटोरियल में विस्तृत तरीके से बताया गया है।

कदम 1: पैकेज का इंस्टालेशन
पहला कदम है react-infinite-scroll-component पैकेज को इंस्टॉल करना होगा। आप निम्नलिखित कमांड का उपयोग करके इस पैकेज को अपने रिएक्ट प्रोजेक्ट में इंस्टॉल कर सकते हैं:

npm install react-infinite-scroll-component

कदम 2: React Component में InfiniteScroll का इम्पोर्ट
अब आपको अपने रिएक्ट कंपोनेंट में react-infinite-scroll-component पैकेज को इम्पोर्ट करना होगा। निम्नलिखित लाइन को अपने कंपोनेंट में जोड़े:

import InfiniteScroll from 'react-infinite-scroll-component';

कदम 3: State और Data का सेटअप
अब आपको एक स्टेट वैरिएबल बनानी होगी जो आपके डेटा को स्टोर करेगी। उदाहरण के लिए, आपका कंपोनेंट निम्नलिखित रूप में देख सकता है:

const [items, setItems] = useState([]);
const [hasMore, setHasMore] = useState(true);

कदम 4: InfiniteScroll कंपोनेंट का उपयोग
अब आपको InfiniteScroll कंपोनेंट का उपयोग करना होगा अपने डेटा को लोड करने के लिए। निम्नलिखित कोड की सहायता से आप इसे कर सकते हैं:

<InfiniteScroll
    dataLength={items.length}
    next={fetchData}
    hasMore={hasMore}
    loader={<h4>Loading...</h4>}
>
    {items.map((item, index) => (
        <div key={index}>{item}</div>
    ))}
</InfiniteScroll>

कदम 5: fetchData Function का बनाना
अब आपको एक fetchData फंक्शन बनानी होगी जो नए डेटा को लोड करेगी। यहाँ एक उदाहरण दिया गया है:

const fetchData = () => {
    // अपने डेटा को लोड करने के लिए यहाँ API का कॉल करें और फिर स्टेट को अपडेट करें
}

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

धन्यवाद।