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# Found an issue? Edit this guide A Edit this guide

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('AJ0P3S7DWQ', '90dfaaf5755e694f341fe68f6e41a6d4');

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

Include React InstantSearch Hooks with a CDN# Found an issue? Edit this guide A Edit this guide

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('AJ0P3S7DWQ', '90dfaaf5755e694f341fe68f6e41a6d4');

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

Browser support# Found an issue? Edit this guide A Edit this guide

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.