Installation
On this page
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>
);
The code examples on this page use the algoliasearch/lite client, which does not provide 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@3.33.0/dist/algoliasearchLite.min.js" integrity="sha256-3Laj91VXexjTlFLgL8+vvIq27laXdRmFIcO2miulgEs=" 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.3.1/themes/reset-min.css" integrity="sha256-t2ATOGCtAIZNnzER679jwcFcKYfLlw01gli6F6oszk8=" 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.3.1/themes/algolia-min.css" integrity="sha256-HB49n/BZjuqiCtQQf49OdZn63XuKFaxcIHWf0HNKte8=" 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'
