Concepts / Building Search UI / Installation
Mar. 15, 2019

Installation

Installing React InstantSearch

React InstantSearch can be used either with a packaging system or with a direct link in your webpage.

With a build system

If you have a JavaScript build system, 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>
);

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@3.32.1/dist/algoliasearchLite.min.js" integrity="sha256-NSTRUP9bvh8kBKi7IHQSmOrMAdVEoSJFBbTA+LoRr3A=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/react-instantsearch-dom@5.4.0/dist/umd/ReactInstantSearchDOM.min.js" integrity="sha256-vmWrOQPli9GZEos/tF1gMDQnKWu3bBPKmcHboTJSpuM=" crossorigin="anonymous"></script>

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

You will then 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 style

Afterwards, you need to manually load the companion CSS file into your page:

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

Or you can load into your page the Algolia theme for the widgets to be styled.

1
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7.1.1/themes/algolia-min.css" integrity="sha256-nkldBwBn2NQqRL1mod7BqHsJ6cEOn6u/ln6F/lI4CFo=" crossorigin="anonymous">

You can find more information about that 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'

Did you find this page helpful?