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
<Snippet>
is a widget that displays attributes in a shorter form (a snippet).
Snippeted attributes are also highlighted.
It uses Algolia’s snippeting feature
with the hit
object provided by <Hits>
,
<InfiniteHits>
, or their Hooks.
To determine which attributes should be snippeted,
first set them from the Algolia dashboard,
the CLI,
or with the API (using the attributesToSnippet
parameter):
JavaScript
attributesToSnippet
, you can also set the snippet’s size to a specific number of words (it defaults to 10).
For example, attributesToSnippet={['description:5']}
.
You can even use this widget with objects other than Algolia search results.
The only requirement is that the provided value must have the following structure:
JSON
Examples
JavaScript
Props
The attribute to snippet in the record.For deeply nested objects, specify a dot-separated value like
actor.bio
.JavaScript
The original
hit
object provided to the component.The object must have a _snippetResult[attribute].value
property.JavaScript
The name of the HTML element to wrap the highlighted parts of the string with.
JavaScript
The name of the HTML element to wrap the non-highlighted parts of the string with.
JavaScript
The character between each item when the attribute to highlight is an array.
JavaScript
The CSS classes you can override and pass to the widget’s elements.
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