React InstantSearch > How do I implement a “Show more” feature on a custom RefinementList?

From React InstantSearch V2

A custom RefinementList widget will show up to showMoreLimit refinement items in items. It lets you sort the items as you want before they’re trimmed. However, it means you need to slice to the desired limit, and keep track of isShowingMore in local state:

const CustomRefinementList = connectRefinementList(function RefinementList({
  items,
  limit,
  showMoreLimit
}) {
  const [isShowingMore, toggleShowMore] = React.useState(false)
  const itemsToDisplay = items.slice(
    0,
    isShowingMore ? showMoreLimit : limit
  )

  // render using `itemsToDisplay`
})