Refinement List Widget in react not changing Show More/Show Less text when adding template

Open Q&A
#1

Hi

If I’m reading the docs correctly I should be able to change the show more/less text in the refinement widget by using the templates property. This however does not appear to be working. So what am I missing? Can this not be done unless you create a custom Refinement List widget?

My component code is as follows:

<RefinementList
  attribute="topics"
  limit={1}
  showMore={true}
  templates={{
      showMoreText: `
          {{#isShowingMore}}
             Less
          {{/isShowingMore}}
          {{^isShowingMore}}
             More
          {{/isShowingMore}}
        `,
     }}
/>
#2

@mark.lett

I believe you are using ReactJS. You need to use translations prop to change the text.

<RefinementList
  // ...
  translations={{
    showMore(expanded) {
      return expanded ? 'Show less' : 'Show more';
    },
    noResults: 'No results',
    submitTitle: 'Submit your search query.',
    resetTitle: 'Clear your search query.',
    placeholder: 'Search here...',
  }}
/>

You can find more details about it on RefinementList | React InstantSearch | API parameters | API Reference | Algolia Documentation

1 Like
#3

Hi @harshmaur thanks for the response. But not quite what I am looking for. Ultimately I want to replace the text altogether with svg icons. So changing the translation isn’t quite enough. I’m sure I saw an example of this somewhere where the text has been replaced by an arrow in a blue box. But there was no code example for it.

#4

Hey @mark.lett,
In that case, you will have to create your own RefinementList component using connectRefinementList You can find documentation on this link

You can see the implementation of the RefinementList on this github link for inspiration.