Infinite Scroll Pagination

Overview

In e-commerce, pagination refers to the process of dividing search results or product listings into multiple pages, which allows users to navigate through the pages of products. It is used to split large sets of products into smaller, more manageable chunks, which can improve the performance of the website and also user experience.

Infinite Scroll Pagination loads the next set of products automatically as the user scrolls to the bottom of the page, eliminating the need for the user to click on next or page numbers. This type of pagination can be helpful for users that want to quickly browse through a large number of products without having to manually click through pages, but it could also lead to lower engagement and higher bounce rates if not implemented well.

Usage

// importing component
import { InfiniteScrollPagination } from "@unbxd-ui/react-search-components";
 
// import the style for the component
import "@unbxd-ui/react-search-components/styles/infiniteScrollPagination.css";

If the styles import does not work, use the following code to import it:

require.resolve("@unbxd-ui/react-search-components/styles/infiniteScrollPagination.css")

Live Demo

// code for the above example
import { UnbxdSearchWrapper } from "@unbxd-ui/react-search-hooks";
import { InfiniteScrollPagination, Products } from "@unbxd-ui/react-search-components";
 
<UnbxdSearchWrapper>
	...
	<InfiniteScrollPagination LoaderComponent={Loader} styles={{ wrapper: "infinite-scroll-pagination-wrapper", preLoader: "loader", postLoader: "loader" }}>
		<Products />
	</InfiniteScrollPagination>
	...
</UnbxdSearchWrapper>

Props

• A functional component that will be rendered as the pre-loader to render the previous set of products.
• The LoaderComponent is highly customisable:
  1. A bare basic component with just a loading text can be used. The following code is the default value of this component:

const LoaderComponent = ({ className }) => {
    return (
        <div className={className}>
            Loading...
        </div>
    );
};

2. You can also choose to add an animated gif or svg as your LoaderComponent as follows:

const LoaderComponent = = ({ className }) => {
    return <div className={className}>
        <img src={"/loader.svg"} alt="loader" />
    </div>
};

3. If you want to keep the product grid flow going, you can create a LoaderComponent which is similar to the following example.

const LoaderComponent = ({ className }) => {
    return (
        <div className={className}>
            {[1, 2, 3, 4].map(idx => (
                <div key={idx} className="product-card loader-container">
                    <div className="loading-image"></div>
                    <div className="loading-title"></div>
                    <div className="loading-price"></div>
                </div>
            ))}
        </div>
    );
};

• This prop will be used to style the component.
• The value must use a defined structure (the structure can be seen in the following example).
• The keys in the structure must be the same while the values can changed as per the user's choice.

styles={{ 
	wrapper: "pagination-wrapper", // used for the entire pagination component
	preLoader: "loader", // used for the pre-loader
	postLoader: "loader" // used for the post-loader
}}

Related Hook

To use the Unbxd React Search SDK without the pre-built InfiniteScrollPagination component, add the functionality to your custom component using the usePagination hook. Refer to the documentation for more details.

Related Components

Fixed PaginationLoad More PaginationProducts