Guides / Building Search UI / Troubleshooting

React InstantSearch FAQ

How to use float values in a numeric menu widget?

The numericMenu doesn’t support float values. We recommend storing an integer representation of this value in your records (e.g., 0.5 * 10 = 5) and display the original value in your UI.

How to search from the n-th character?

To search only when the query is longer than a certain length, you can implement a proxy search client. Then, you can add a condition (e.g., query.length > 3).

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

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
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`
})

Why is my searchState ignored?

The uiState works only when the widgets responsible for each UI state attribute is mounted. For instance, a SearchBox widget is necessary to provide a query.

Did you find this page helpful?