Gathering detailed insights and metrics for react-easy-infinite-scroll-hook
Gathering detailed insights and metrics for react-easy-infinite-scroll-hook
Gathering detailed insights and metrics for react-easy-infinite-scroll-hook
Gathering detailed insights and metrics for react-easy-infinite-scroll-hook
react-continous-scroll
Lightweight and easy to use react hook for infinite scroll
use-scroll-tracker
useScrollTracker is a custom React hook that tracks the user's scroll progress on a web page or within a specific container. It returns the current scroll percentage, making it easy to implement features like reading progress bars, infinite scrolling, scr
♾️ A react hook that makes it easy to add infinite scroll in any components. It is very simple to integrate and supports any direction.
npm install react-easy-infinite-scroll-hook
Typescript
Module System
73.1
Supply Chain
98.6
Quality
76.1
Maintenance
100
Vulnerability
100
License
TypeScript (93.09%)
CSS (3.52%)
JavaScript (2.64%)
HTML (0.74%)
Total Downloads
143,746
Last Day
11
Last Week
1,225
Last Month
5,771
Last Year
101,019
MIT License
106 Stars
374 Commits
6 Forks
1 Watchers
2 Branches
1 Contributors
Updated on Jun 22, 2025
Minified
Minified + Gzipped
Latest Version
2.1.4
Package Id
react-easy-infinite-scroll-hook@2.1.4
Unpacked Size
51.74 kB
Size
13.06 kB
File Count
64
Published on
Nov 06, 2023
Cumulative downloads
Total Downloads
Last Day
-71.8%
11
Compared to previous day
Last Week
-16.6%
1,225
Compared to previous week
Last Month
-7.8%
5,771
Compared to previous month
Last Year
223.1%
101,019
Compared to previous year
1
31
A hook that will save you from endless scrolling problems! Infinite scrolling that really works and is very easy to integrate!
This hook allows you to create simple, lightweight components with infinite scrolling in all directions, supporting both windowed and scrollable elements.
Works with any third-party libraries, you just need to specify the correct container for the ref
object.
Check out the demo for some examples.
up
, down
, left
, right
)100%
test coverage~2.4kB
1 # with npm 2 npm install --save react-easy-infinite-scroll-hook 3 # with yarn 4 yarn add react-easy-infinite-scroll-hook
You can create infinite scrolling in any direction
and in any pair
, for example: up-down
, down-right
, etc.
and even all at once
.
1import useInfiniteScroll from 'react-easy-infinite-scroll-hook';
2
3const InfiniteListComponent = ({ isLoading, items, canLoadMore, next }) => {
4 // TypeScript example:
5 // const ref = useInfiniteScroll<YourElemntType>(...props);
6 const ref = useInfiniteScroll({
7 // Function to fetch more items
8 next,
9 // The number of items loaded if you use the "Y-scroll" axis ("up" and "down")
10 // if you are using the "X-scroll" axis ("left" and "right") use "columnCount" instead
11 // you can also use "rowCount" and "columnCount" if you use "Y-scroll" and "X-scroll" at the same time
12 rowCount: items.length,
13 // Whether there are more items to load
14 // if marked "true" in the specified direction, it will try to load more items if the threshold is reached
15 // support for all directions "up", "down", "left", "right", both individually and in all directions at the same time
16 hasMore: { down: canLoadMore },
17 });
18
19 return (
20 <div
21 ref={ref}
22 style={{
23 height: 500,
24 overflowY: 'auto',
25 }}
26 >
27 {items.map((item) => (
28 <div key={item.key}>{item.value}</div>
29 ))}
30 {isLoading && <div>Loading...</div>}
31 </div>
32 );
33};
This hook supports all react-virtualized components (Collection
, Grid
, MultiGrid
, List
, Masonry
, Table
). Check out the demo for more examples.
Try it live:
Component | Description | Link |
---|---|---|
List | Virtualized List component with infinite scroll | |
Grid | Virtualized Grid component with infinite scroll down and right |
1import useInfiniteScroll from 'react-easy-infinite-scroll-hook'; 2import { List } from 'react-virtualized'; 3 4const VirtualizedInfiniteListComponent = ({ isLoading, items, canLoadMore, next }) => { 5 const ref = useInfiniteScroll({ 6 next, 7 rowCount: items.length, 8 hasMore: { down: canLoadMore }, 9 }); 10 11 return ( 12 <div> 13 <List 14 ref={ref} 15 width={500} 16 height={500} 17 rowHeight={60} 18 rowCount={items.length} 19 rowRenderer={({ key, index, style }) => { 20 const item = data[index]; 21 22 return ( 23 <div key={key} style={style}> 24 {item} 25 </div> 26 ); 27 }} 28 /> 29 {isLoading && <div>Loading...</div>} 30 </div> 31 ); 32};
After initialization, this hook returns a React ref
object, which you must pass to your element ref
.
Name | Required | Description | Type | Default Value |
---|---|---|---|---|
next | Yes | A callback when more items are requested by the user. Receives a single parameter specifying the direction to load e.g. (direction) => Promise<void> | Function | |
hasMore | Yes | Whether there are more items to load. If marked true in the specified direction, it will try to load more items if the threshold is reached. Expect object with directions to load { up: false, down: false, left: false, right: false } | object | |
rowCount | Condition | Number of items in a vertical list (scroll axis Y ). Required if you are using vertical scroll. | number | |
columnCount | Condition | Number of items in a horizontal list (scroll axis X ). Required if you are using horizontal scroll. | number | |
onScroll | The callback is called when the container is scrolled: ({ clientHeight: number, scrollHeight: number, scrollTop: number, clientWidth: number, scrollWidth: number, scrollLeft: number }) => void | Function | ||
initialScroll | The initial scroll position of the element, which is applied after the ref has been initialized | object | ||
reverse | The direction of the scroll axis is used to create scrolling in the opposite direction, for example when using the CSS style flex-direction: 'row-reverse' | object | ||
scrollThreshold | The threshold at which the next function is called. It can be specified in pixels from the scrollbar value, for example '200px' and as a percentage of the container size from 0.1 to 1 (1 is 100% ) | number or string | 1 | |
windowScroll | When set to true , uses a window as the scroll element. If you are using a scroll window, then anything you pass to the ref will be ignored | boolean | false |
react-easy-infinite-scroll-hook
aims to support all evergreen browsers and recent mobile browsers for iOS and Android. IE 9+ is also supported.
If you find a browser-specific problem, please report it.
Yes you can! To use it with other libraries you must specify the correct DOM element for the
ref
object.
flex-direction: 'column-reverse'
?Yes, just pass
reverse: { column: true }
to props forflex-direction: 'column-reverse'
orreverse: { row: true }
forflex-direction: 'row-reverse'
.
react-virtualized
MultiGrid
component?
MultiGrid
is a complex component with a lot of scrollable containers, and to use it you must specify the correct container for theref
object:
1import React, { useCallback } from 'react'; 2import useInfiniteScroll from 'react-easy-infinite-scroll-hook'; 3import { MultiGrid } from 'react-virtualized'; 4 5const VirtualizedInfiniteMultiGridComponent = ({ isLoading, items, canLoadMore, next }) => { 6 const ref = useInfiniteScroll({ 7 next, 8 columnCount: items.length, 9 hasMore: { right: canLoadMore }, 10 }); 11 12 // Use `useCallback` so we don't recreate the function on each render - Could result in infinite loop 13 const selectRef = useCallback( 14 (node) => { 15 ref.current = node?._bottomRightGrid; 16 }, 17 [ref] 18 ); 19 20 return ( 21 <div> 22 <MultiGrid ref={selectRef} {...props} /> 23 {isLoading && <div>Loading...</div>} 24 </div> 25 ); 26};
react-window
?
react-easy-infinite-scroll-hook
works with any DOM element, so just specify the correct container for theref
object:
1import React, { useCallback } from 'react'; 2import useInfiniteScroll from 'react-easy-infinite-scroll-hook'; 3import { FixedSizeList } from 'react-window'; 4 5const Component = ({ isLoading, items, canLoadMore, next }) => { 6 const ref = useInfiniteScroll({ 7 next, 8 columnCount: items.length, 9 hasMore: { right: canLoadMore }, 10 }); 11 12 // Use `useCallback` so we don't recreate the function on each render - Could result in infinite loop 13 const setRef = useCallback((node) => { 14 if(node) 15 ref.current=node._outerRef 16 }, []); 17 18 return ( 19 <FixedSizeList 20 ref={setRef} 21 className="List" 22 width={600} 23 height={500} 24 itemSize={60} 25 itemCount={items.length} 26 > 27 {Row} 28 </FixedSizeList>); 29};
Please read through our contributing guidelines. Included are directions for opening issues, coding standards, and notes on development.
Code released under the MIT License.
No vulnerabilities found.
No security vulnerabilities found.