API Reference / React InstantSearch Hooks / <Snippet>

<Snippet>

A
Signature 
<Snippet
  attribute={keyof THit|string[]}
  hit={THit}
  // Optional props
  highlightedTagName={React.ReactType<any>}
  nonHighlightedTagName={React.ReactType<any>}
  separator={React.ReactNode}
  classNames={Partial<SnippetClassNames>}
  ...props={React.ComponentProps<'span'>}
/>
See code examples
See live example

About this widget # A

<Snippet> is a widget that displays snippeted attributes of a search result. A snippet is an excerpt of a longer piece of text, truncated to a fixed size around the match.

Snippeted attributes are also highlighted.

Requirements#

The required hit prop is an Algolia hit provided by <Hits>, <InfiniteHits> or their Hooks. You can pass a custom object that doesn’t come from Algolia, as long as you follow the expected structure.

Copy 
1
2
3
4
5
6
7

{
  "_snippetResult": {
    "attributeName": {
      "value": "..."
    }
  }
}

The attribute must be set up in attributesToSnippet either inside the Algolia dashboard or at runtime.

Copy 
1

<Configure attributesToSnippet={['description']} />

Examples # A

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

import React from 'react';
import algoliasearch from 'algoliasearch/lite';
import { InstantSearch, Hits, Snippet } from 'react-instantsearch-hooks-web';

const searchClient = algoliasearch('AJ0P3S7DWQ', '90dfaaf5755e694f341fe68f6e41a6d4');

function Hit({ hit }) {
  return (
    <article>
      <Snippet hit={hit} attribute="description" />
    </article>
  );
}

function App() {
  return (
    <InstantSearch indexName="instant_search" searchClient={searchClient}>
      <Hits hitComponent={Hit} />
    </InstantSearch>
  );
}

Props # A

attribute #
type: keyof THit|string[]
Required

The attribute to highlight in the record.

For deeply nested objects, you can specify a dot-separated value like "actor.bio".
Copy 
1
2
3
4

<Snippet
  // ...
  attribute="description"
/>
hit #
type: THit
Required

The original hit object provided to the component.

The object must have a _snippetResult[attribute].value property.
Copy 
1
2
3
4

<Snippet
  // ...
  hit={hit}
/>
highlightedTagName #
type: React.ReactType<any>
default: "mark"
Optional

The name of the HTML element to wrap the highlighted parts of the string with.
Copy 
1
2
3
4

<Snippet
  // ...
  highlightedTagName="em"
/>
nonHighlightedTagName #
type: React.ReactType<any>
default: "span"
Optional

The name of the HTML element to wrap the non-highlighted parts of the string with.
Copy 
1
2
3
4

<Snippet
  // ...
  nonHighlightedTagName="div"
/>
separator #
type: React.ReactNode
default: ", "
Optional

The character between each item when the attribute to snippet is an array.
Copy 
1
2
3
4

<Snippet
  // ...
  separator=" - "
/>
classNames #
type: Partial<SnippetClassNames>
Optional

CSS classes to pass to the widget’s elements. This is 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.
Copy 
1
2
3
4
5
6
7

<Snippet
  // ...
  classNames={{
    root: 'MyCustomSnippet',
    separator: 'MyCustomSnippetSeparator MyCustomSnippetSeparator--subclass',
  }}
/>
...props #
type: React.ComponentProps<'span'>
Optional

Any <span> prop to forward to the root element of the widget.
Copy 
1
2
3
4
5

<Snippet
  // ...
  className="MyCustomSnippet"
  title="My custom title"
/>
Did you find this page helpful?
React InstantSearch Hooks v6