The <ReverseHighlight> component displays highlighted parts of a search result attribute with inverted highlighting (non-matching parts are highlighted).
Import
import { ReverseHighlight } from 'react-instantsearch';
Props
The search result object containing highlight information.<ReverseHighlight hit={hit} attribute="query" />
attribute
string | string[]
required
The attribute to highlight. Can be a string or array for nested attributes.// Simple attribute
<ReverseHighlight hit={hit} attribute="query" />
// Nested attribute
<ReverseHighlight hit={hit} attribute={['author', 'name']} />
The HTML tag to use for highlighted parts (non-matching parts).<ReverseHighlight
hit={hit}
attribute="query"
highlightedTagName="em"
/>
The HTML tag to use for non-highlighted parts (matching parts).<ReverseHighlight
hit={hit}
attribute="query"
nonHighlightedTagName="span"
/>
The separator to use when the attribute is an array.<ReverseHighlight hit={hit} attribute="tags" separator=" | " />
CSS classes to customize the component styling.
Example
import { InstantSearch, ReverseHighlight } from 'react-instantsearch';
import { liteClient as algoliasearch } from 'algoliasearch/lite';
const searchClient = algoliasearch(
'YourApplicationID',
'YourSearchOnlyAPIKey'
);
function QuerySuggestion({ hit }) {
return (
<div>
<ReverseHighlight hit={hit} attribute="query" />
</div>
);
}
function App() {
return (
<InstantSearch searchClient={searchClient} indexName="query_suggestions">
{/* Your autocomplete implementation */}
</InstantSearch>
);
}
Use Case
This component is particularly useful for query suggestions where you want to highlight the part of the suggestion that doesn’t match the user’s current input:
// User types: "iph"
// Suggestion: "iphone 15 pro"
// ReverseHighlight displays: iph[one 15 pro]
// (where [...] represents the highlighted portion)
function AutocompleteSuggestion({ item }) {
return (
<div className="suggestion">
<ReverseHighlight hit={item} attribute="query" />
</div>
);
}