How to Install React InstantSearch Hooks

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

React InstantSearch Hooks is composed of three separate packages:

• react-instantsearch-hooks which exposes all Hooks
• react-instantsearch-hooks-web which exposes all UI widgets and re-exports all Hooks
• react-instantsearch-hooks-server which exposes the server APIs

The code examples on this page use the React InstantSearch Hooks 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 Hooks as an npm package

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

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

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

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-hooks-web';

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

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

Include React InstantSearch Hooks with a CDN

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

1
2
3
4
5
6
7
8
9
10
<script
  src="https://cdn.jsdelivr.net/npm/algoliasearch@4.5.1/dist/algoliasearch-lite.umd.js"
  integrity="sha256-EXPXz4W6pQgfYY3yTpnDa3OH8/EPn16ciVsPQ/ypsjk="
  crossorigin="anonymous"
></script>
<script
  src="https://cdn.jsdelivr.net/npm/react-instantsearch-hooks@6.24.0/dist/umd/ReactInstantSearchHooks.min.js"
  integrity="sha256-9VH2kSJ5sFbWxXwGE6/ioTprmxen8Z4ggF5ZlBRzO48="
  crossorigin="anonymous"
></script>

jsDelivr is a third-party CDN. We are not able to provide support regarding 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.