Snippet | React InstantSearch V6 (Deprecated)

This version of React InstantSearch has been deprecated in favor of the latest version of React InstantSearch.

Signature# Found an issue? Edit this guide A Edit this guide

<Snippet
  attribute={string}
  hit={object}
  // Optional parameters
  tagName={string}
  nonHighlightedTagName={string}
  separator={React.Node}
/>

About this widget# Found an issue? Edit this guide A Edit this guide

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# Found an issue? Edit this guide A Edit this guide

1
2
3
4
5
import { Hits, Snippet } from 'react-instantsearch-dom';

const Hit = ({ hit }) => <Snippet hit={hit} attribute="description" />;

<Hits hitComponent={Hit} />

Props# Found an issue? Edit this guide A Edit this guide

attribute#

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#

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#

The HTML tag to use for the highlighted parts of the string.

For example, mark.

1
2
3
4
<Snippet
  // ...
  tagName="mark"
/>

nonHighlightedTagName#

The HTML tag to use for the non-highlighted parts of the string.

For example, span.

1
2
3
4
<Snippet
  // ...
  nonHighlightedTagName="span"
/>

separator#

The character that joins the items if the attribute to snippet is an array.

1
2
3
4
<Snippet
  // ...
  separator=" - "
/>