How to install React InstantSearch

This is the React InstantSearch v7 documentation. React InstantSearch v7 is the latest version of React InstantSearch and the stable version of React InstantSearch Hooks.

If you were using React InstantSearch v6, you can upgrade to v7.

If you were using React InstantSearch Hooks, you can still use the React InstantSearch v7 documentation, but you should check the upgrade guide for necessary changes.

If you want to keep using React InstantSearch v6, you can find the archived documentation.

You can either install React InstantSearch as an npm package, or include it in your app with a CDN link.

React InstantSearch is composed of two separate packages:

• react-instantsearch which exposes all UI widgets and re-exports all Hooks.
• react-instantsearch-core which only exposes all Hooks. You only need this package if you’re using React InstantSearch with React Native.

The code examples on this page use the React InstantSearch library together with the algoliasearch/lite client, which is smaller but doesn’t support indexing your data. To perform indexing operations, import the regular algoliasearch client.

Installing React InstantSearch as an npm package

If you’re using a package manager and a build tool, you can install React InstantSearch from npm:

1
2
3
npm install algoliasearch react-instantsearch
# or
yarn add algoliasearch react-instantsearch

1
2
3
npm install algoliasearch react-instantsearch-core
# or
yarn add algoliasearch react-instantsearch-core

Then in your app, import the module:

1
2
3
4
5
6
7
8
9
10
11
12
13
import React from 'react';
import algoliasearch from 'algoliasearch/lite';
import { InstantSearch } from 'react-instantsearch';

const searchClient = algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey');

function App() {
  return (
    <InstantSearch searchClient={searchClient} indexName="instant_search">
      {/* Widgets */}
    </InstantSearch>
  );
}

Include React InstantSearch with a CDN

If you don’t use a package manager and a build tool, you can include React InstantSearch directly from the jsDelivr CDN.

1
2
3
4
5
6
7
8
9
10
<script
  src="https://cdn.jsdelivr.net/npm/algoliasearch@4.22.0/dist/algoliasearch-lite.umd.js"
  integrity="sha256-/2SlAlnMUV7xVQfSkUQTMUG3m2LPXAzbS8I+xybYKwA="
  crossorigin="anonymous"
></script>
<script
  src="https://cdn.jsdelivr.net/npm/react-instantsearch@7.5.0/dist/umd/ReactInstantSearch.min.js"
  integrity="sha256-85uX2K/7qm7zsFE9QzL5S93695M0ca+3YDHlq4drDIc="
  crossorigin="anonymous"
></script>

jsDelivr is a third-party CDN. Algolia can’t provide support for such third-party services.

You now have access to the ReactInstantSearchHooks object on the global window object.

1
2
3
4
5
6
7
8
9
10
11
const { InstantSearch } = ReactInstantSearchHooks;

const searchClient = algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey');

function App() {
  return (
    <InstantSearch searchClient={searchClient} indexName="instant_search">
      {/* Widgets */}
    </InstantSearch>
  );
}

Browser support

Algolia supports the last two versions of the major browsers: Chrome, Edge, Firefox, Safari.

To support Internet Explorer 11, you can use polyfill.io. Add this script to your page to conditionally load polyfills.

1
<script src="https://polyfill.io/v3/polyfill.min.js?features=default%2CArray.prototype.find%2CArray.prototype.includes%2CPromise%2CObject.assign%2CObject.entries"></script>

The code samples in this documentation use a JavaScript syntax not natively supported by older browsers like Internet Explorer 11. If your site needs to support older browsers, make sure to use a tool like Babel to make your code work in the browsers you target.