PageSize

Overview

In e-commerce, “page size” refers to the number of products that are displayed on a single page of search results or product listings. It allows users to control how many items they see at a time, by giving them the option to choose from different page sizes such as 10, 20, 50 or 100 items per page.

The purpose of this feature is to help users quickly find and view the products they are interested in, without having to scroll through an excessive number of items. It can also improve the overall user experience by making it easier to scan and compare products. Additionally, for some e-commerce website, the page size concept can help to improve site performance and loading time.

Some e-commerce websites also provide pagination options so that users can navigate through the pages of search results or product listings by clicking on page numbers or next/previous buttons.

Usage

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

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

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

Live Demo

// code for the above example
import { UnbxdSearchWrapper } from "@unbxd-ui/react-search-hooks";
import { PageSize, Products } from "@unbxd-ui/react-search-components"
 
<UnbxdSearchWrapper>
	...
	<PageSize text={"Products per page:"} options={[3, 6, 9]} />
	<Products />
	...
</UnbxdSearchWrapper>

Props

• A string value which will be used as the label for the select element.
• Default Value: "Products per page:".

• The options that must be displayed in the dropdown. Each value must be a number, and generally the values of multiples of the first option.
• Default Value:

options={[12, 24, 36, 48, 60]}

• 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: "page-size-container",
    label: "label",
    selectWrapper: "size-select-wrapper",
    select: "size-select",
    body: "size-body",
    activatorWrapper: "size-activator",
    activatorText: "size-text",
    activatorIcon: "size-activator-icon",
    option: "option",
    selectedOption: "selected",
}}

Related Hook

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