React-instantsearch | RefinementList | ShowMore number of items less

Hello guys !

I’m using a custom refinementList with a showMore / showLess button. I add a limit at 7 to only show 7 items if there is more. The rest of them is showing on my click on showMore and this is working well ! But I want to add the number of the rest near my button like : Show more (number).
image

But my items got only 7 elements because of my limit and he is uploading only when I click on showMore. So I cant access it before. I tried with a :

const itemsToDisplay = items.slice(0, isShowingMore ? props.showMoreLimit : props.limit)

const itemCounts = () => {
let count = items.length - props.limitFacets
return count
}

But the value is still 7 for items.length so 7 - 7 = 0.

Do I miss something ? Is there any data to show how much values can be display in showMore ?

Thanks for your help,

Raph

Hi Raph,

limit will actually limit the amount of facet values returned by the API, so you won’t be able to calculate the remainder on the client side and we don’t provide it as part of the response.

If you’re just trying to reduce the amount of space the facet values take up (rather than reducing the traffic from the service), you could use showMoreLimit instead. This way you’ll have all the results on the client side and the UI widget can decide where to put the cutoff. Then you can just calculate the difference between the total values and the display values on the client.

Thanks for the answer Chuck ! I tried without limit and with showMoreLimit but I got a default limit value at 10…

Huh. Any chance you have a codesandbox or equivalent I could look at?