-
// Custom Widget
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}({item.count})
</label>
</li>
))}
</ul>
);
};
const CustomRefinementList = connectRefinementList(RefinementList);
export default CustomRefinementList; // use
<CustomRefinementList
defaultRefinement={[...]}
attribute="brand"
/> By the way, this didn't work. <CustomRefinementList
defaultRefinement={[...]}
transformItems={items => items} {/* add this line */}
attribute="brand"
/> and more facetOrdering has type error. <CustomRefinementList
defaultRefinement={[...]}
facetOrdering {/* Type Error */}
attribute="brand"
/> |
Beta Was this translation helpful? Give feedback.
Answered by
Haroenv
Feb 7, 2022
Replies: 0 comments 2 replies
-
The facetOrdering defaults to A type error is possible, as the DefinitelyTyped types are community-maintained, and thus don't guarantee having every option typed |
Beta Was this translation helpful? Give feedback.
1 reply
Answer selected by
nino-cast
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The facetOrdering defaults to
true
, and if you set the ordering in your index (following this guide https://www.algolia.com/doc/guides/building-search-ui/ui-and-ux-patterns/facet-display/react/) for that facet, the ordering set in the index overrides the ordering set by being selected (unless facetOrdering is set to false)A type error is possible, as the DefinitelyTyped types are community-maintained, and thus don't guarantee having every option typed