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

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=" - "
/>