How to Install React InstantSearch

You can use React InstantSearch either with a packaging system or with a direct link in your web page.

With a packaging system

If you have a JavaScript build tool, you can install React InstantSearch from npm:

1
npm install algoliasearch react-instantsearch-dom

Then in your module, you can load the main package:

1
2
3
4
5
6
7
8
9
10
11
import algoliasearch from 'algoliasearch/lite';
import { InstantSearch, SearchBox, Hits } from 'react-instantsearch-dom';

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

const App = () => (
  <InstantSearch searchClient={searchClient} indexName="demo_ecommerce">
    <SearchBox />
    <Hits />
  </InstantSearch>
);

The code examples on this page use the algoliasearch/lite client, which doesn’t offer indexing methods. If you want to perform indexing operations, you have to import the regular algoliasearch client.

Directly in your page

This method uses a built version of React InstantSearch from the jsDelivr CDN:

1
2
3
4
<script src="https://cdn.jsdelivr.net/npm/react@16.8.4/umd/react.production.min.js" integrity="sha256-ctUamuIgSCQg1wsh8Iw0QbDXScmyXhjJ6lxYUscC3FA=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@16.8.4/umd/react-dom.production.min.js" integrity="sha256-8uWWG/7CB3OS89Cw67+B++t6w0EMGfQE9C6OGps+Wd8=" crossorigin="anonymous"></script>
<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-dom@6.7.0/dist/umd/ReactInstantSearchDOM.min.js" integrity="sha256-wggJgvcPaPOJnfujGmGMq7LzJgc7/EqEtLCW/BPZy7E=" crossorigin="anonymous"></script>

The jsDeliver CDN is highly available with over 110 locations in the world.

You now have access to the ReactInstantSearchDOM object in the global scope (window).

1
2
3
4
5
6
7
8
9
10
const { InstantSearch, SearchBox, Hits } = ReactInstantSearchDOM;

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

const App = () => (
  <InstantSearch searchClient={searchClient} indexName="demo_ecommerce">
    <SearchBox />
    <Hits />
  </InstantSearch>
);

Load the styles

You then need to manually load the companion CSS file into your page:

1
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7.3.1/themes/reset-min.css" integrity="sha256-t2ATOGCtAIZNnzER679jwcFcKYfLlw01gli6F6oszk8=" crossorigin="anonymous">

Or you can load the satellite theme widget styles into your page.

1
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7.4.5/themes/satellite-min.css" integrity="sha256-TehzF/2QvNKhGQrrNpoOb2Ck4iGZ1J/DI4pkd2oUsBc=" crossorigin="anonymous">

You can find more information in the styling guide.

Create InstantSearch App

You can use create-instantsearch-app. Similarly to other interactive command-line applications, you can run it either with npm or with yarn:

1
2
3
npx create-instantsearch-app 'getting-started'
# or
yarn create instantsearch-app 'getting-started'

Supported browsers

The code samples used in this documentation use 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 transform your code into code that works in the browsers you target.

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

To support Internet Explorer 11, 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>