Page Size

Basic Setup & Configuration

1. How do I import and use the PageSize component?

Import the PageSize component from @unbxd-ui/react-search-components.

import { UnbxdSearchCSRWrapper } from "@unbxd-ui/react-search-components";
import { PageSize } from "@unbxd-ui/react-search-components";
 
<UnbxdSearchCSRWrapper>
  <PageSize />
</UnbxdSearchCSRWrapper>

2. What are the default page size options and how do I customize them?

The default options are [12, 24, 36, 48, 60] products per page. You can customize by passing a custom options array prop:

const customOptions = [10, 20, 50, 100];
 
<PageSize options={customOptions} />;

3. Can I add a label to the PageSize component?

Use the label prop to add descriptive text like "Products per page:" or "Show:". The label includes proper accessibility attributes and can be styled using the label CSS class.

4. Can I customize the dropdown activator?

Yes, the activator (dropdown trigger) can be styled through the activatorWrapper, activatorText, and activatorIcon CSS classes. You can customize the dropdown arrow and trigger appearance to match your design.

<PageSize
	options={[12, 24, 36, 48]}
	label="Items per page:"
	styles={{
		activatorWrapper: "custom-activator-wrapper",
		activatorText: "custom-activator-text",
		activatorIcon: "custom-activator-icon",
	}}
/>

PageSize Behavior and Selection

1. When does the PageSize component appear or hide?

The PageSize component automatically hides when numberOfProducts is 0 (no search results). It only appears when there are products to paginate, preventing unnecessary UI elements when they're not relevant.

2. Can we have multiple instances of PageSize component?

Yes, you can have multiple PageSize components on the same page. All instances will share the same page size state through the usePageSize hook, so they will stay synchronized. When a user selects a different page size using any PageSize component, all instances will update to reflect the current selection.

Customization & Styling

1. Does the React Search SDK provide default CSS for the PageSize component?

Yes, the PageSize component comes with built-in CSS that you can import and use as a base for your styling:

// Import the built-in CSS
import "@unbxd-ui/react-search-components/styles/pageSize.css";

2. Can I customize the appearance of the PageSize component?

Yes, use the styles prop to override CSS classes. Click here to see how to use it.