InstantSearch / React / V6 / API reference

Snippet | React InstantSearch V6 (Deprecated)

Deprecated content
This documentation is for a deprecated version of React InstantSearch. Some features and settings may be missing or their usage may have changed. Refer to the documentation for the latest version of React InstantSearch for up-to-date information.

Signature

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

Required
Type: 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

Required
Type: 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

Optional
Type: string

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

For example, mark.

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

nonHighlightedTagName

Optional
Type: 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

Optional
Type: React.Node

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

1
2
3
4
<Snippet
  // ...
  separator=" - "
/>
Did you find this page helpful?