Snippet - Algolia

This is the React InstantSearch v7 documentation. If you’re upgrading from v6, see the upgrade guide. If you were using React InstantSearch Hooks, this v7 documentation applies—just check for necessary changes. To continue using v6, you can find the archived documentation.

Signature

<Snippet
  attribute={string}
  hit={object}
  // Optional props
  highlightedTagName={ReactType}
  nonHighlightedTagName={ReactType}
  separator={ReactNode}
  classNames={object}
  ...props={ComponentProps<'span'>}
/>

Import

JavaScript

import { Snippet } from "react-instantsearch";

See this widget in action

Preview this widget and its behavior.

<Snippet> is a widget that 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 Hooks. To determine which attributes should be snippeted, set them from the Algolia dashboard, the CLI, or with the API (using the attributesToSnippet parameter):

JavaScript

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

JSON

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

Examples

JavaScript

import React from "react";
import { liteClient as algoliasearch } from "algoliasearch/lite";
import { InstantSearch, Hits, Snippet } from "react-instantsearch";

const searchClient = algoliasearch("YourApplicationID", "YourSearchOnlyAPIKey");

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

attribute

keyof THit

required

The attribute to snippet in the record.For deeply nested objects, specify a dot-separated value like actor.bio.

JavaScript

<Snippet
  // ...
  attribute="description"
/>;

hit

THit

required

The original hit object provided to the component.The object must have a _snippetResult[attribute].value property.

JavaScript

<Snippet
  // ...
  hit={hit}
/>;

highlightedTagName

React.ReactType<any>

default:"mark"

The name of the HTML element to wrap the highlighted parts of the string with.

JavaScript

<Snippet
  // ...
  highlightedTagName="em"
/>;

nonHighlightedTagName

React.ReactType<any>

default:"span"

The name of the HTML element to wrap the non-highlighted parts of the string with.

JavaScript

<Snippet
  // ...
  nonHighlightedTagName="div"
/>;

separator

React.ReactNode

default:","

The character between each item when the attribute to highlight is an array.

JavaScript

<Snippet
  // ...
  separator=" - "
/>;

classNames

Partial<SnippetClassNames>

The CSS classes you can override and pass to the widget’s elements. It’s 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.

JavaScript

<Snippet
  // ...
  classNames={{
    root: "MyCustomSnippet",
    separator: "MyCustomSnippetSeparator MyCustomSnippetSeparator--subclass",
  }}
/>;

...props

React.ComponentProps<'span'>

Any <span> prop to forward to the root element of the widget.

JavaScript

<Snippet
  // ...
  className="MyCustomSnippet"
  title="My custom title"
/>;

​Import

See this widget in action

​About this widget

​Examples

​Props

Import

About this widget

Examples

Props