Algolia Instantsearch with React

Algolia InstantSearch with React 150 words.

Jeff Delaney avatar
By
Created
Last Updated
Code Slack
#react #algolia
👀
This tutorial is an extension of the [Algolia Cloud Functions Guide](/lessons/algolia-cloud-functions/). You must have the Cloud Functions deployed to start making instant search queries from your frontend app.

Install InstantSearch

Algolia provides official React support. Follow the installation steps to make the prebuilt components available in your app.

React InstantSearch Component

App.js 
import React from 'react';
import './App.css';

import algoliasearch from 'algoliasearch/lite';
import { InstantSearch, SearchBox, Hits, connectHighlight } from 'react-instantsearch-dom';

const searchClient = algoliasearch('YOUR-APP-ID', 'YOUR-SEARCH-KEY');


function App() {
  
  return (
    <InstantSearch searchClient={searchClient} indexName="customers">
      <SearchBox />
      <Hits hitComponent={Hit} />
    </InstantSearch>
  )
}

const CustomHighlight = connectHighlight(({ highlight, attribute, hit }) => {
  const parsedHit = highlight({
    highlightProperty: '_highlightResult',
    attribute,
    hit
  });

  return (
    <div>
      <h3>{hit.username}</h3>
      <img src={hit.avatar} alt={hit.username} />
      {parsedHit.map(
        part => part.isHighlighted ? <mark>{part.value}</mark> : part.value
      )}
    </div>
  );
});

const Hit = ({ hit }) => (
  <p>
    <CustomHighlight attribute="bio" hit={hit} />
  </p>
);


export default App;

Q&A Chat