Snippet | React InstantSearch V6 (Deprecated)
Signature
<Snippet attribute={string} hit={object} // Optional parameters tagName={string} nonHighlightedTagName={string} separator={React.Node} />
About this widget
The Snippet
widget 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 connectors.
To determine which attributes should be snippeted, first set them from the Algolia dashboard, the CLI, or with the API (using the attributesToSnippet
parameter):
1
<Configure attributesToSnippet={['description']} />
With 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:
1
2
3
4
5
6
7
{
"_snippetResult": {
"attributeName": {
"value": "..."
}
}
}
Examples
1
2
3
4
5
import { Hits, Snippet } from 'react-instantsearch-dom';
const Hit = ({ hit }) => <Snippet hit={hit} attribute="description" />;
<Hits hitComponent={Hit} />
Props
attribute
string
The attribute of the record to snippet. For deeply nested objects, specify a dot-separated value like actor.bio
.
1
2
3
4
<Snippet
// ...
attribute="name"
/>
hit
object
The original hit
object, given from Hits
or connectHits
. Needs a _snippetResult[attribute].value
property to work.
1
2
3
4
<Snippet
// ...
hit={hit}
/>
tagName
string
The HTML tag to use for the highlighted parts of the string.
For example, mark
.
1
2
3
4
<Snippet
// ...
tagName="mark"
/>
nonHighlightedTagName
string
The HTML tag to use for the non-highlighted parts of the string.
For example, span
.
1
2
3
4
<Snippet
// ...
nonHighlightedTagName="span"
/>
separator
React.Node
The character that joins the items if the attribute to snippet is an array.
1
2
3
4
<Snippet
// ...
separator=" - "
/>