Infinite Scroll

An Infinite Scroll component is a user interface feature that automatically loads and displays additional content as the user scrolls down a page. Instead of traditional pagination, this component creates a seamless browsing experience by continuously appending new items, such as images or articles, when the user reaches the bottom of the viewport. This enhances user engagement and keeps the content flow uninterrupted, making it ideal for applications like social media feeds, product galleries, and news websites.

# Demo

Basic Infinite Scroll

Simple infinite scroll with basic items and loading state.

Item 1

#1

Item 2

#2

Item 3

#3

Item 4

#4

Item 5

#5

Item 6

#6

Item 7

#7

Item 8

#8

Item 9

#9

Item 10

#10

Loaded: 10 items

Has more: Yes

Social Media Feed

Infinite scroll for social media posts with rich content.

John Doe

•2024-01-15

text

Getting Started with React

React is a powerful library for building user interfaces. Here are some tips to get started...

Jane Smith

•2024-01-14

image

Beautiful Sunset Photography

Captured this amazing sunset during my trip to the mountains. Nature never fails to amaze!

Product Catalog

E-commerce style infinite scroll for product listings.

Electronics

Wireless Headphones

(4.5)

$99.99

Kitchen

Coffee Mug

(4.2)

$15.99

Loading...

Loading more products...

Notifications List

Infinite scroll for notifications with different types and states.

Your order has been shipped

2 minutes ago

success

New comment on your post

5 minutes ago

info

Custom Loading States

Infinite scroll with custom loading animations and states.

Custom Item 1

Enhanced content with custom styling

#1

Custom Item 2

Enhanced content with custom styling

#2

Custom Item 3

Enhanced content with custom styling

#3

Custom Item 4

Enhanced content with custom styling

#4

Custom Item 5

Enhanced content with custom styling

#5

Custom Item 6

Enhanced content with custom styling

#6

Custom Item 7

Enhanced content with custom styling

#7

Custom Item 8

Enhanced content with custom styling

#8

Items Loaded:

8

Progress:

20%

Infinite Scroll Summary

Overview of all infinite scroll implementations and their current states.

Basic Items

10

Simple items loaded

Ready

Social Posts

2

Posts in feed

Ready

Products

2

Products listed

Ready

Notifications

2

Notifications shown

Ready

# Usage

# Attributes

Name	Type	Default	Details
next	function	Required	Function to load next set of data.
hasMore	boolean	Required	Whether there is more data to load.
children	React.ReactNode	Required	Content to display in the scroll container.
loader	React.ReactNode	Required	Loading indicator component.
scrollThreshold	number \| string	Optional	Threshold for triggering next load.
endMessage	React.ReactNode	Optional	Message to show when no more data.
style	CSSProperties	Optional	Custom styles for the container.
height	number \| string	Optional	Height of the scroll container.
scrollableTarget	HTMLElement \| string \| null	Optional	Target element for scrolling.
hasChildren	boolean	Optional	Whether container has children.
inverse	boolean	Optional	Whether to use inverse scrolling.
pullDownToRefresh	boolean	Optional	Enable pull to refresh functionality.
pullDownToRefreshContent	React.ReactNode	Optional	Content for pull to refresh.
releaseToRefreshContent	React.ReactNode	Optional	Content for release to refresh.
pullDownToRefreshThreshold	number	Optional	Threshold for pull to refresh.
refreshFunction	function	Optional	Function to call on refresh.
onScroll	(e: Event) => any	Optional	Scroll event handler.
dataLength	number	Required	Length of current data array.
initialScrollY	number	Optional	Initial scroll position.
className	string	' '	You can customise by passing tailwind classes.
aria-label	string	Optional	ARIA label for accessibility.