Fixed 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.

"Fixed Pagination" is the most common and allows users to navigate through the pages of products by clicking on page numbers or by clicking on the next and previous buttons or by clicking the first page and last page buttons. The page numbers and buttons are usually displayed at the bottom of the search results or product listings.

Usage

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

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

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

Live Demo

1. Default As Buttons

// code for the above example
import { UnbxdSearchWrapper } from "@unbxd-ui/react-search-hooks";
import { FixedPagination } from "@unbxd-ui/react-search-components";
 
<UnbxdSearchWrapper>
	...
	<Products styles={{ wrapper: "product-container", loader: "loader" }} />
	<FixedPagination
		onPaginate={() => {
			document.querySelector(".product-container")?.scrollIntoView({ behavior: "smooth", block: "start", inline: "start" });
		}}
		viewAs="BUTTONS"
		pageLimit={5}
	/>
	...
</UnbxdSearchWrapper>

2. Pagination with just next and previous page buttons

// code for the above example
import { UnbxdSearchWrapper } from "@unbxd-ui/react-search-hooks";
import { FixedPagination, Products } from "@unbxd-ui/react-search-components";
 
<UnbxdSearchWrapper>
	...
	<Products styles={{ wrapper: "product-container", loader: "loader" }} />
	<FixedPagination
		onPaginate={() => {
			document.querySelector(".product-container")?.scrollIntoView({ behavior: "smooth", block: "start", inline: "start" });
		}}
		viewAs="BUTTONS"
		pageLimit={0}
		showFirstBtn={false}
		showLastBtn={false}
		prevBtnContent={"Prev"}
		nextBtnContent={"Next"}
	/>
	...
</UnbxdSearchWrapper>

3. Default As Dropdown

// code for the above example
import { UnbxdSearchWrapper } from "@unbxd-ui/react-search-hooks";
import { FixedPagination, Products } from "@unbxd-ui/react-search-components";
 
<UnbxdSearchWrapper>
	...
	<Products styles={{ wrapper: "product-container", loader: "loader" }} />
	<FixedPagination
		onPaginate={() => {
			document.querySelector(".product-container")?.scrollIntoView({ behavior: "smooth", block: "start", inline: "start" });
		}}
		viewAs="DROPDOWN"
		pageLimit={5}
	/>
	...
</UnbxdSearchWrapper>

4. Default As Input Box

// code for the above example
import { UnbxdSearchWrapper } from "@unbxd-ui/react-search-hooks";
import { FixedPagination, Products } from "@unbxd-ui/react-search-components";
 
<UnbxdSearchWrapper>
	...
	<Products styles={{ wrapper: "product-container", loader: "loader" }} />
	<FixedPagination
		onPaginate={() => {
			document.querySelector(".product-container")?.scrollIntoView({ behavior: "smooth", block: "start", inline: "start" });
		}}
		viewAs="INPUT"
		pageLimit={5}
	/>
	...
</UnbxdSearchWrapper>

Props

• A function that is called whenever page is changed.
• Default Value:

const onPaginate = () => {};

• Determines if the button to go to first page must be shown or not.
• Default Value: true.

• The text or component that will be rendered in the first page button.
• Default Value:

const firstBtnContent = () => <div>&lt;&lt;</div>;

• Determines if the button to go to last page must be shown or not.
• Default Value: true.

• The text or component that will be rendered in the last page button.
• Default Value:

const lastBtnContent = () => <div>&gt;&gt;</div>;

• Determines if the button to go to previous page must be shown or not.
• Default Value: true.

• The text or component that will be rendered in the previous page button.
• Default Value:

const prevBtnContent = () => <div>&lt;</div>;

• Determines if the button to go to next page must be shown or not.
• Default Value: true.

• The text or component that will be rendered in the next page button.
• Default Value:

const nextBtnContent = () => <div>&gt;</div>;

• Determines how the page numbers must be shown.
• Allowed Values:
  • "BUTTONS" - The page numbers will be shown in the form of buttons.
  • "DROPDOWN" - The page numbers will be shown in the form of a dropdown.
  • "INPUT" - User can navigate to the page number by entering the page number in an input box and clicking the 'Go' button.
• Default Value: "BUTTONS".

• Determines the number of pages that must be shown.
• In the case where FixedPagination is rendered as "BUTTONS", this value is REQUIRED.
• In the case where FixedPagination is rendered as "DROPDOWN", this value is not mandatory. If this value is present, it is considered and only those many values will be shown in the dropdown, else all the page numbers will be shown.
• Default Value: 5.

• 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 component wrapper
    firstPageBtn: "first-page-btn", // used for the first page button component
    prevPageBtn: "prev-page-btn", // used for the previous page button component
    nextPageBtn: "next-page-btn", // used for the next page button component
    lastPageBtn: "last-page-btn", // used for the last page button component
    buttons: {
        wrapper: "pagination-buttons-wrapper", // used for the wrapper for page number buttons wrapper
        pageBtn: "page-btn", // used for each page number button component
        currentPageBtn: "current-page-btn", // used for the current page number button component
    },
    dropdown: {
        wrapper: "pagination-dropdown", // used for the pages dropdown wrapper component
        label: "label", // used for the label for the select dropdown component
        select: "select", // used for the select dropdown component
    },
    input: {
        wrapper: "pagination-input", // used for the wrapper of the input element
        input: "input", // used for the input element
        button: "button", // used for the 'Go' button
    }
}}

Related Hook

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

Related Components

Infinite Scroll PaginationLoad More Pagination