Concepts / Building Search UI / Installation
Jan. 07, 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('B1G2GM9NG0', 'aadef574be1f9252bb48d4ea09b5cfe5');

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.4.0/umd/react.development.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@16.4.0/umd/react-dom.development.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/algoliasearch@3.27.1/dist/algoliasearchLite.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-instantsearch-dom@5.2.0-beta.0/dist/umd/ReactInstantSearchDOM.min.js"></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('B1G2GM9NG0', 'aadef574be1f9252bb48d4ea09b5cfe5');

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.0/themes/reset-min.css">

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.0/themes/algolia-min.css">

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?