usePageSize

Overview

The usePageSize hook provides a way to manage and update the page size state in your application using the Unbxd ReactJS SDK.

Usage

import { usePageSize } from "@unbxd-ui/react-search-hooks";

⚠️

Note:

The usePageSize hook must be used within the wrapper (in CSR, SSR and Custom Hooks approaches) to ensure that the respective component(s) and the search functionality work properly.

Code Example

import { usePageSize } from "@unbxd-ui/react-search-hooks";
 
const MyComponent = () => {
	const { pageSize, setPageSize } = usePageSize([10, 20, 30]);
	
	const handlePageSizeChange = (pageSizeValue) => {
		setPageSize(pageSizeValue);
	};
 
	const renderPageSizeComponent = () => {
		return (
			<div>
				<select
					id="pageSize"
					onChange={(event) => {
						handlePageSizeChange(event.target.value);
					}}>
					<option value={10}>10</option>
					<option value={20}>20</option>
					<option value={30}>30</option>
				</select>
			</div>
		);
	};
	
	return renderPageSizeComponent();
};

Hook API

Return Values

pageSize

number

The current page size value.
Default value - 12.

setPageSize

function

The function to set the new pagesize.

Use Cases

PageSize

usePagination useProductView