This is the React InstantSearch v7 documentation.
If you’re upgrading from v6, see the upgrade guide.
If you were using React InstantSearch Hooks,
this v7 documentation applies—just check for necessary changes.
To continue using v6, you can find the archived documentation.
Signature
Import
JavaScript
About this widget
Displays the highlighted attributes of your search results. The requiredhit
prop is an Algolia hit provided by <Hits>
,
<InfiniteHits>
or their Hooks.
You can pass a custom object that doesn’t come from Algolia, as long as you follow the expected structure.
JSON
Examples
JavaScript
Props
The highlighted attribute.Specify a dot-separated value for nested objects, like
actor.name
.JavaScript
The original
hit
object
provided to the component.
It contains all the data for that result, including the highlighted parts.The
hit
object must contain a _highlightResult[attribute].value
property.JavaScript
The HTML element that wraps the highlight.
JavaScript
The HTML element that wraps the non-highlighted parts of the string.
JavaScript
The character between each item when the attribute to highlight is an array.
JavaScript
To customize the appearance, override the appropriate class in your widget theme.
It’s useful to style widgets with class-based CSS frameworks like Bootstrap or Tailwind CSS.
root
. The root element of the widget.highlighted
. The highlighted parts.nonHighlighted
. The non-highlighted parts.separator
. The separator elements between highlighted parts.
JavaScript
Any
<span>
prop to forward to the root element of the widget.JavaScript