Security News
Highlights from the 2024 Rails Community Survey
A record 2,709 developers participated in the 2024 Ruby on Rails Community Survey, revealing key tools, practices, and trends shaping the Rails ecosystem.
react-infinite-scrollable
Advanced tools
react-infinite-scrollable
is a lightweight and easy-to-use React component that enables infinite scrolling functionality in your web applications. With this package, you can effortlessly implement infinite scrolling for long lists, grids, or any other content that needs to be dynamically loaded as the user scrolls.
To get started with react-infinite-scrollable, simply install the package via npm:
$ npm install react-infinite-scrollable --save
import React from "react";
import InfiniteScrollable from "react-infinite-scrollable";
function YourComponent() {
const [page, setPage] = useState(1);
const [hasMore, setHasMore] = useState(true);
const [loading, setLoadig] = useState(true);
const [article, setArticle] = useState([]);
const fetchPost = () => {
setLoadig(true);
fetch(`https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=10`)
.then((data) => {
setData((old) => [...old, ...data]);
})
.catch((error) => {
setHasMore(false);
console.log({ error });
})
.finally(() => {
setLoadig(false);
});
};
useEffect(() => {
fetchPost();
}, [page]);
const loadMore = () => {
setPage((pre) => pre + 1);
};
return (
<InfiniteScroll
onEnd={loadMore}
loading={loading}
hasMore={hasMore}
loadingComponent={<center>my custom loading component</center>}
noMoreComponent={<center>my custom No more Post</center>}
offset={300}
>
{articles.map((article) => (
<div key={article.id} style={{ marginBottom: 16 }}>
<h2>{article.title}</h2>
<p>{article.body}</p>
</div> // your component here
))}
</InfiniteScroll>
);
}
Name | Description | Type | Default |
---|---|---|---|
hasMore | Indicates whether there are more items to load. | boolean | true |
loading | Indicates whether the component is currently loading more items. | boolean | false |
loadingComponent | Optional loading component to display while loading. | React.ReactNode | <center>loading..</center> |
noMoreComponent | Optional no more data component to display. | React.ReactNode | <center>no more</center> |
onEnd | A function to load more items. | Function | - |
offset | The offset value to trigger loading more items. | Number | 0 |
FAQs
react utility
The npm package react-infinite-scrollable receives a total of 1 weekly downloads. As such, react-infinite-scrollable popularity was classified as not popular.
We found that react-infinite-scrollable demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
A record 2,709 developers participated in the 2024 Ruby on Rails Community Survey, revealing key tools, practices, and trends shaping the Rails ecosystem.
Security News
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.