Pagination

Basic Setup & Configuration

1. How do I import and use the Pagination components?

You can import the different pagination components from @unbxd-ui/react-search-components like FixedPagination, LoadMorePagination, InfiniteScrollPagination.

import { UnbxdSearchCSRWrapper } from "@unbxd-ui/react-search-components";
import { FixedPagination, LoadMorePagination, InfiniteScrollPagination } from "@unbxd-ui/react-search-components";
 
<UnbxdSearchCSRWrapper>
	<FixedPagination />
	<LoadMorePagination />
	<InfiniteScrollPagination />
</UnbxdSearchCSRWrapper>;

2. What are the different types of pagination components available and what should I use when?

There are three main pagination component types, each offering different user experiences for navigating through search results:

1. FixedPagination - Traditional page-based navigation with numbered pages, first/last/next/previous buttons . Best for precise navigation, when users need to jump to specific pages or return to previous positions
2. LoadMorePagination - Manual loading with a "Load More" button to fetch additional results. Ideal for mobile interfaces or when you want users to control when more content loads
3. InfiniteScrollPagination - Automatic loading as users scroll, providing seamless browsing experience. Perfect for social feeds, image galleries, or continuous browsing experiences

3. How do I configure the FixedPagination component to display as `buttons`, `dropdown` or `input`?

You can configure FixedPagination to display in three different modes:

// Button-based pagination (default)
<FixedPagination viewAs="BUTTONS" pageLimit={5} />
 
// Dropdown page selection
<FixedPagination viewAs="DROPDOWN" />
 
// Input field for direct page entry
<FixedPagination viewAs="INPUT" />

4. Can I limit the number of page buttons displayed in FixedPagination?

Yes, you can control the number of visible page buttons using the pageLimit prop when using the BUTTONS view mode:

// Show only 3 page buttons at a time
<FixedPagination pageLimit={3} />

5. How can I customize the navigation buttons in FixedPagination?

You can customize button content and visibility using content props:

<FixedPagination
	showFirstBtn={true}
	firstBtnContent={() => <span>⏮️ First</span>}
	showLastBtn={true}
	lastBtnContent="Last ⏭️"
	showNextBtn={true}
	nextBtnContent={() => <span>Next →</span>}
	showPrevBtn={true}
	prevBtnContent="← Previous"
/>

6. Can I control the visibility of next, previous, first, and last buttons?

Yes, you can show or hide navigation buttons using boolean props:

<FixedPagination
	showNextBtn={true} // Show/hide next button
	showPrevBtn={true} // Show/hide previous button
	showFirstBtn={false} // Show/hide first page button
	showLastBtn={false} // Show/hide last page button
/>

7. Can I customize the LoaderComponent for InfiniteScrollPagination and LoadMorePagination?

Yes, you can customize the loading indicators by providing a custom LoaderComponent to both InfiniteScrollPagination and LoadMorePagination:

// Custom loader component
const CustomLoader = ({ className }) => (
  return ...
);
 
// InfiniteScrollPagination with custom loader
<InfiniteScrollPagination
  LoaderComponent={CustomLoader}
/>
 
// LoadMorePagination with custom loader
<LoadMorePagination
  LoaderComponent={CustomLoader}
  showLoading={true}  // Show loader on the "Load More" button
/>

Pagination Behavior & Navigation

1. Can FixedPagination have multiple instances on the same page?

Yes, you can have multiple FixedPagination components on the same page. All instances will share the same pagination state through the usePagination hook, so they will stay synchronized. When a user navigates to a different page using any pagination component, all instances will update to reflect the current page.

// Multiple pagination instances that stay synchronized
<FixedPagination viewAs="BUTTONS" pageLimit={5} />
<FixedPagination viewAs="DROPDOWN" />
<FixedPagination viewAs="INPUT" />

2. How do LoadMorePagination and InfiniteScrollPagination components handle bidirectional loading?

Both components support loading previous pages when users scroll to the top or when previous content is available. They use IntersectionObserver to detect when users reach the boundaries and automatically load content while maintaining scroll position.

Styling Customization

1. Does the React Search SDK provide default CSS for the pagination components?

Yes, the React Search SDK provides built-in CSS styles for all pagination components. To use the default styles, import the respective CSS files in your application:

// For FixedPagination
import "@unbxd-ui/react-search-components/dist/styles/fixedPagination.css";
 
// For LoadMorePagination
import "@unbxd-ui/react-search-components/dist/styles/loadMorePagination.css";
 
// For InfiniteScrollPagination
import "@unbxd-ui/react-search-components/dist/styles/infiniteScrollPagination.css";

This provides basic styling for buttons, navigation controls, loaders, and their respective states. You can override these styles with your own CSS or use the styles prop to apply custom classes.

2. Can I customize the appearance of pagination components?

Yes, use the styles prop to override CSS classes. Each component has its specific style properties.