ページング

概要#

Paginationのカスタムウィジェットを作成します。

ライブデモ

実装#

components/custom-pagination.tsx
import React from 'react';
import { connectPagination } from 'react-instantsearch-dom';

const Pagination = ({
  currentRefinement,
  nbPages,
  refine,
}: {
  currentRefinement: number;
  nbPages: number;
  refine: (value: number) => void;
}) => {
  return (
    <div className="flex justify-between">
      {currentRefinement > 1 && (
        <button
          onClick={() => refine(currentRefinement - 1)}
          className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
        >
          前へ
        </button>
      )}
      {nbPages > currentRefinement && (
        <button
          onClick={() => refine(currentRefinement + 1)}
          className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
        >
          次へ
        </button>
      )}
    </div>
  );
};

const CustomPagination = connectPagination(Pagination);

export default CustomPagination;

カスタムウィジェットから現在のページ番号(currentRefinement) や全体のページ数(nbPages)を受け取り、それに基づいて「次へ、前へ」のボタンを表示しています。それぞれのボタンクリック時に refine を使って新しいページ番号に対する検索を実行しています。

使用#

<CustomPagination
  defaultRefinement={Number(router.query.page) || 1}
/>