Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
83 lines (64 sloc) 1.93 KB
title lastmod publishdate author draft description tags youtube github type
Algolia Instantsearch with React
2019-08-25 13:07:30 -0700
2019-08-25 13:07:30 -0700
Jeff Delaney
false
Algolia InstantSearch with React
react
algolia
lessons

{{% box emoji="👀" %}} This tutorial is an extension of the Algolia Cloud Functions Guide. You must have the Cloud Functions deployed to start making instant search queries from your frontend app. {{% /box %}}

Install InstantSearch

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

React InstantSearch Component

{{< file "react" "App.js" >}} {{< highlight jsx >}} 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 ( ) }

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

return (

{hit.username}

{hit.username} {parsedHit.map( part => part.isHighlighted ? {part.value} : part.value )}
); });

const Hit = ({ hit }) => (

);

export default App; {{< /highlight >}}

You can’t perform that action at this time.