How to Install React InstantSearch

You can add React InstantSearch to your app as an npm package or include it directly in your HTML.

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 { liteClient as 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. It’s a smaller package, but doesn’t support indexing your data. If you also want to index your data, import the full algoliasearch client.

Directly in your page

To include a pre-built version of InstantSearch from jsDelivr:

1
2
3
4
<script src="https://cdn.jsdelivr.net/npm/react@18.3.1/umd/react.production.min.js" integrity="sha256-2Unxw2h67a3O2shSYYZfKbF80nOZfn9rK/xTsvnUxN0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@18.2.0/umd/react-dom.production.min.js" integrity="sha256-IXWO0ITNDjfnNXIu5POVfqlgYoop36bDzhodR6LW5Pc=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/algoliasearch@4.25.2/dist/algoliasearch-lite.umd.js" integrity="sha256-yi498VwhoNKaHUihPJ/PZvhJghXYiGgvQG8/P8BgddQ=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/react-instantsearch-dom@6.40.4/dist/umd/ReactInstantSearchDOM.min.js" integrity="sha256-xryXI/k9Y8u7+aY20+j8mV7ar+hDHrjS4RFkF/p5fqA=" crossorigin="anonymous"></script>

You can now access the ReactInstantSearchDOM object from the global window object, for example:

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

To add styles to your InstantSearch app, you can add these companion style sheets:

• satellite is a set of opinionated styles. It also includes the reset style sheet, so you don’t have to include it separately.

  HTML

  Copy

  1
  2
  3
  4
  5
  6
   <link
     rel="stylesheet"
     href="https://cdn.jsdelivr.net/npm/instantsearch.css@8.5.1/themes/satellite-min.css"
     integrity="sha256-woeV7a4SRDsjDc395qjBJ4+ZhDdFn8AqswN1rlTO64E="
     crossorigin="anonymous"
   >
  

• reset is a minimal set of unopinionated styles that ensure the consistent appearance of your InstantSearch app across devices. If you want to add your own styles, you should at least include the reset CSS to avoid visual side effects

  HTML

  Copy

  1
  2
  3
  4
  5
  6
   <link
     rel="stylesheet"
     href="https://cdn.jsdelivr.net/npm/instantsearch.css@8.5.1/themes/reset-min.css"
     integrity="sha256-KvFgFCzgqSErAPu6y9gz/AhZAvzK48VJASu3DpNLCEQ="
     crossorigin="anonymous"
   >
  

Supported browsers

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

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, use a tool like Babel to transform your code into code that works in your target browsers.

To support Internet Explorer 11, you need polyfills for: Promise, Object.entries, and Object.assign.

Create InstantSearch App

To create an app, you can use create-instantsearch-app and, similarly to other interactive command-line applications, you can run it either with npm or with yarn:

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

See also