RefinementList: ease customization with labelComponent

[redox]

Do you want to request a feature or report a bug?

Feature.

What is the current behavior?

Often times, you just want to change the way the items are displayed in a RefinementList (with more than just CSS). For that, the only option so far is to use the connectRefinementList connector and rebuild the refinement list yourself.

It turns out that handling the logic around isRefined, createURL and refine is not that trivial and I was wondering whether we couldn't introduce a labelComponent which would be responsible of rendering the label based on the item.

Something like:

function MyFacetValueLabel({item}) {
  return <img src={'https://....../' + item.value + '.jpg'} />;
 // maybe if we return `false` here, we could even avoid rendering the value
}

<RefinementList attributeName="category" labelComponent={MyFacetValueLabel} />

[vvo]

Yes the API goal was that we did not wanted to provide such feature and rather guide through using connectRefinementList instead.

If you need to customize the rendering => use connectors was our moto since the begining.

What was the struggle in using the connectRefinementList part? Today we do not feel that using connectors is complex so if it is then we will need more information on why it's hard to take a decision.

It's a tricky decision to make because then you have an API where you say "if you want you can configure the rendering a bit, but if you want to go further, use a connector" versus "if you want to configure the rendering, use a connector".

Adding more option gives the user the impression that he can be in control while he will have only some control versus using a connector.

[redox]

What was the struggle in using the connectRefinementList part? Today we do not feel that using connectors is complex so if it is then we will need more information on why it's hard to take a decision.

It's not really struggling; it's just that if you don't know how the createURL() works or just if you don't want/need to deeply understand how item.isRefined and refine() should be used; it's really not easy to change the label. You end up copy/pasting the RefinementList component code (and may discover how those things are working).

It's a tricky decision to make because then you have an API where you say "if you want you can configure the rendering a bit, but if you want to go further, use a connector" versus "if you want to configure the rendering, use a connector".

I think it really looks like the itemComponent for the Hits. For some widgets, it really makes sense to ease the customization without needing to go for the connectors + DYI. The labelComponent for RefinementList (and Menu) is the only one I was thinking about so far -> it's really not something I will propose for every single widget.

Adding more option gives the user the impression that he can be in control while he will have only some control with an option like labelComponent.

Yes, it's a balance we need to find.

[vvo]

We do want people to have to use connectors as soon as they hit a DOM rendering feature wall. We do not want them to think that custom DOM rendering features are spread amongst many features and API entries. Mostly because then you can be lost in feature land, choosing the right path then being hard to do.

If we identify clear common use cases where the need for a hit/label component is really beneficial then we will need to revisit this issue.

Also we recently introduced "transformItems" props on widget which can make it easier to inject some data/rephrase some labels (without touching the DOM).

https://community.algolia.com/instantsearch.js/react/guide/Sorting_and_filtering.html

[redox]

Also we recently introduced "transformItems" props on widget which can make it easier to inject some data/rephrase some labels (without touching the DOM).

Works for me 👍