Highlight | React InstantSearch V6 (Deprecated)
Signature
<Highlight attribute={__string|array_} hit={object} // Optional parameters tagName={string} nonHighlightedTagName={string} separator={React.Node} />
About this widget
The Highlight
widget displays highlighted attributes of your search results.
Requirements
The required hit
prop is an object as provided by Hits
, InfiniteHits
(or their connectors). You can use this widget even with a different object than the Algolia results. The only requirement is that the provided value must have the following structure:
1
2
3
4
5
6
7
{
"_highlightResult": {
"attributeName": {
"value": "..."
}
}
}
Examples
1
2
3
4
5
import { Hits, Highlight } from 'react-instantsearch-dom';
const Hit = ({ hit }) => <Highlight hit={hit} attribute="name" />;
<Hits hitComponent={Hit} />
Props
attribute
string
The attribute of the record to highlight. You can give a dot-separated value for deeply nested objects, like actor.name
.
If an attribute name contains a period (.
), you can opt-out of the splitting on periods by passing the attribute path as an array, like ['actor.name', 'fr']
.
1
2
3
4
<Highlight
// ...
attribute="name"
/>
hit
object
The original hit
object, given from Hits
or connectHits
. Needs a _highlightResult[attribute].value
property to work.
1
2
3
4
<Highlight
// ...
hit={hit}
/>
tagName
string
The HTML tag to use for the highlighted parts of the string.
For example: mark
.
1
2
3
4
<Highlight
// ...
tagName="mark"
/>
nonHighlightedTagName
string
The HTML tag to use for the non-highlighted parts of the string.
For example: span
.
1
2
3
4
<Highlight
// ...
nonHighlightedTagName="span"
/>
separator
React.Node
The character that joins the items if the attribute to highlight is an array.
1
2
3
4
<Highlight
// ...
separator=" - "
/>