Connectors connectHighlight


connectHighlight connector provides the logic to create an highlighter component that will retrieve, parse and render an highlighted attribute from an Algolia hit.

Exposed props

This connector does not expose external props.

Provided props

These are the props that the wrapped Component will receive.

type: function 

function to retrieve and parse an attribute from a hit. It takes a configuration object with 3 attributes: highlightProperty which is the property that contains the highlight structure from the records, attribute which is the name of the attribute (it can be either a string or an array of strings) to look for and hit which is the hit from Algolia. It returns an array of objects {value: string, isHighlighted: boolean}. If the element that corresponds to the attribute is an array of strings, it will return a nested array of objects.


import React from 'react'; import { InstantSearch, SearchBox, Hits, connectHighlight } from 'react-instantsearch-dom'; const CustomHighlight = connectHighlight( ({ highlight, attribute, hit, highlightProperty }) => { const highlights = highlight({ highlightProperty: '_highlightResult', attribute, hit }); return => part.isHighlighted ? ( <mark>{part.value}</mark> ) : ( <span>{part.value}</span> )); } ); const Hit = ({ hit }) => ( <p> <CustomHighlight attribute="name" hit={hit} /> </p> ); const App = () => ( <InstantSearch appId="latency" apiKey="6be0576ff61c053d5f9a3225e2a90f76" indexName="instant_search" > <SearchBox defaultRefinement="pho" /> <Hits hitComponent={Hit} /> </InstantSearch> );