React InstantSearch v4.0.0-beta.0

React InstantSearch v4.0.0-beta.0

Today marks the release of the 4.0.0 beta version of React InstantSearch.

Also many features and many bugfixes were silently released in 3.x.x versions so we summarize them here.

Check our beta documentation website here: https://algolia-instantsearch.netlify.com/instantsearch.js/react/

Handling multi indices

This feature is the reason behind this new major version.

Handling multiple indices was already possible with React InstantSearch but we significantly simplified the syntax by introducing a new <Index> component.

Using multiple indices is useful when you want to:

  • display hits from different indices
  • share a single SearchBox
  • build an autocomplete menu targeting different indices

Now, if you want to target multiple indices with the same query, you can express it this way:

<InstantSearch
  appId=""
  apiKey=""
  indexName="index1"
>
    <SearchBox/>
    <Configure hitsPerPage={1} />
    <Index indexName="index1">
      <Hits />
    </Index>
    <Index indexName="index2">
      <Hits />
    </Index>
    <Index indexName="index3">
      <Hits />
    </Index>
</InstantSearch>

Learn more by checking our dedicated guide, you’ll find explanations and links to dedicated recipes.

##Breaking Changes

By adding this feature we did some breaking changes:

connectCurrentRefinements and CurrentRefinements

The query was available as a prop if the clearsQuery prop was true. We removed it.

Now queries are part of the items prop. Each query has the following shape:

[
	{
		label: 'query: queryValue',
		value: clearQueryFunc,
		currentRefinement: 'queryValue',
	}
]

To get those queries you still need to pass the clearsQuery prop. Otherwise they are just filtered.

How to migrate:

If you were using <ClearAll clearsQuery> directly there’s is nothing to do, the behaviour is unchanged. It will clear all the refinements and all the queries.

If you were using the connectCurrentRefinements connector and use the query that was forwarded, then you need to change your logic and look after the query by filtering the items prop.

###Resetting pagination

When performing a refinement, the page is automatically reseted to 0. Because results changed, you want to see them from the beginning. This behaviour was hidden from every widgets and magically applied. Now, every widgets needs to explicitly reset the page if needed inside their refine function.

Also, each time a refinement will be applied, then the page will appear in the search state even if the Pagination/infiniteHits widgets were not used. Therefore, if you are modifying the URL based on the search state, this will also appear there.

How to migrate:

If you don’t use the createConnector api, then you have nothing to do as the behaviour is unchanged.

If you use the createConnector api only for conditional display, then you have nothing to do as the behaviour is unchanged.

If you use the createConnector api to build your very own widget then you need to add {page: 1} when returning the search state from the refine function. Also, all the items returned by the getMetadata function should have a cleaning value function that returns a search state with {page: 1}. We recommend that you reuse the refine function for that. Also, if you’re in this situation, don’t hesitate to open an issue on our github repository, we might miss a connector to ease the implementation on the user side.

Features from > 3.0.0

SearchBox: custom reset and submit components

You can now pass custom reset and submit components to the <SearchBox> widget in order to customise icons.

This adds submitComponent and resetComponent as props.

SearchBox: event handling

We are know handling an onSubmit and onReset events on our SearchBox. Also every on* events are now forwarded to the input.

MultiRange: add an all range

MultiRange now automatically get an all range that covers every values. The boundaries of this range are computed by the Algolia engine.

If you don’t want this behaviour you can use css to hide it by targeting the .ais-MultiRange__itemAll classname.

Important bug fix

<Configure> current parameters are now present inside the search state.

Also, dynamical updates of <Configure> parameters are only handled by modifying the props directly. We built the geo search recipe to demonstrate how it works.

How can you help?

We will continue improving the multi indices feature before releasing a stable v4.0.0 version. If you are using this beta and have any feedbacks for us, please give it on discourse or GitHub.

Happy coding!

3 Likes