Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-infinite-scroll-component

Package Overview
Dependencies
Maintainers
2
Versions
42
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-infinite-scroll-component

An Infinite Scroll component in react.

  • 6.1.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
702K
decreased by-7.41%
Maintainers
2
Weekly downloads
 
Created

What is react-infinite-scroll-component?

The react-infinite-scroll-component package provides a simple and efficient way to implement infinite scrolling in React applications. It allows you to load more content as the user scrolls down, which is particularly useful for displaying large lists of data without overwhelming the user or the browser.

What are react-infinite-scroll-component's main functionalities?

Basic Infinite Scroll

This code demonstrates a basic implementation of infinite scrolling using the react-infinite-scroll-component package. It initializes a list of items and appends more items as the user scrolls down.

```jsx
import React, { useState } from 'react';
import InfiniteScroll from 'react-infinite-scroll-component';

const App = () => {
  const [items, setItems] = useState(Array.from({ length: 20 }));
  const [hasMore, setHasMore] = useState(true);

  const fetchMoreData = () => {
    if (items.length >= 100) {
      setHasMore(false);
      return;
    }
    setTimeout(() => {
      setItems(items.concat(Array.from({ length: 20 })));
    }, 1500);
  };

  return (
    <InfiniteScroll
      dataLength={items.length}
      next={fetchMoreData}
      hasMore={hasMore}
      loader={<h4>Loading...</h4>}
      endMessage={
        <p style={{ textAlign: 'center' }}>
          <b>Yay! You have seen it all</b>
        </p>
      }
    >
      {items.map((i, index) => (
        <div key={index} style={{ height: 30, border: '1px solid black', margin: 6, padding: 8 }}>
          div - #{index}
        </div>
      ))}
    </InfiniteScroll>
  );
};

export default App;
```

Infinite Scroll with API Data

This example shows how to use react-infinite-scroll-component to load data from an API. It fetches data from a paginated API and appends it to the existing list of items as the user scrolls.

```jsx
import React, { useState, useEffect } from 'react';
import InfiniteScroll from 'react-infinite-scroll-component';

const App = () => {
  const [items, setItems] = useState([]);
  const [page, setPage] = useState(1);
  const [hasMore, setHasMore] = useState(true);

  useEffect(() => {
    fetchMoreData();
  }, []);

  const fetchMoreData = async () => {
    const res = await fetch(`https://api.example.com/data?page=${page}`);
    const data = await res.json();
    setItems([...items, ...data.items]);
    setPage(page + 1);
    if (data.items.length === 0) {
      setHasMore(false);
    }
  };

  return (
    <InfiniteScroll
      dataLength={items.length}
      next={fetchMoreData}
      hasMore={hasMore}
      loader={<h4>Loading...</h4>}
      endMessage={
        <p style={{ textAlign: 'center' }}>
          <b>Yay! You have seen it all</b>
        </p>
      }
    >
      {items.map((item, index) => (
        <div key={index} style={{ height: 30, border: '1px solid black', margin: 6, padding: 8 }}>
          {item.name}
        </div>
      ))}
    </InfiniteScroll>
  );
};

export default App;
```

Other packages similar to react-infinite-scroll-component

Keywords

FAQs

Package last updated on 20 Apr 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc