絞り込み条件

概要#

RefinementListのカスタムウィジェットを作成します。RefinementListは facet で設定された属性に基づいて検索結果を絞り込みます。たとえばタグやカテゴリによる絞り込みがよく使われます。

ライブデモ

カスタムウィジェットの作成#

components/custom-refinement-list.tsx
import React from 'react';
import { RefinementListProvided } from 'react-instantsearch-core';
import { connectRefinementList } from 'react-instantsearch-dom';

const RefinementList = ({ items, refine }: RefinementListProvided) => {
  return (
    <ul className="space-y-3">
      {items.map((item) => (
        <li key={item.label} className="flex items-center">
          <input
            checked={item.isRefined}
            type="checkbox"
            id={item.label}
            onChange={(e) => {
              refine(item.value);
            }}
            className="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500"
          />
          <label htmlFor={item.label} className="ml-3 text-sm text-gray-500">
            {item.label === 'male' ? '男性' : '女性'}({item.count})
          </label>
        </li>
      ))}
    </ul>
  );
};

const CustomRefinementList = connectRefinementList(RefinementList);

export default CustomRefinementList;

ポイントは以下です。

• items で絞り込み対象の条件一覧を受け取ってUIを実装しています
• item.count で現在の検索条件に該当する件数を表示します
• refine により検索条件を反映しています

表示上の特性#

• facetはデフォルトで現在の検索条件に該当する件数の多い順で並びます。
• チェックされた項目は自動的に一番上に移動します。
• 現在の検索条件に合致する結果がないfacet値については表示されません。

カスタムウィジェットの使用#

<CustomRefinementList
  defaultRefinement={getDefaultRefinement()}
  attribute="gender"
/>

attribute="gender" の部分は絞り込み条件となる facet を指定します。インデックス管理でfacetに設定された属性である必要があります。たとえばカテゴリ(category)で絞り込みたいとしたらfacetにcategoryを設定した上で gender の部分を category に変更します。