If you’re working on a bunch of data and need a way of handling paginations to show your results, you can use a built-in hook called usePaginateResults<T>(results, options) from the Smart Builder SDK package.

The structure of the options parameter is as follows:

type Options = {
  itemsPerPage?: number;
  pageSizeKey?: string;
};

This parameter is optional ⬆️

This hook receives a useCallback React hook, and returns a promise as follows:

• (queryParams: string, value?: string) => Promise<PaginateData<T>>

Here’s an example:

import { usePaginateResults, PaginateData } from 'smart-builder-sdk';

const fetchData = useCallback(
  (queryParams: string, value?: string) => {
    return/* your logic here */;
  }, [/* dependencies if apply */]);

 const {
    next,
    prev,
    jump,
    loading,
    error,
    items,
    currentPage,
    maxPage,
    totalItems,
    itemsPerPage,
    refreshList,
    handleSearch,
} = usePaginateResults<any>(fetchData, { itemsPerPage: 30, pageSizeKey: 'per_page' });