UI libraries / React InstantSearch / Widgets

<Snippet>

This is the React InstantSearch v7 documentation. React InstantSearch v7 is the latest version of React InstantSearch and the stable version of React InstantSearch Hooks.

If you were using React InstantSearch v6, you can upgrade to v7.

If you were using React InstantSearch Hooks, you can still use the React InstantSearch v7 documentation, but you should check the upgrade guide for necessary changes.

If you want to keep using React InstantSearch v6, you can find the archived documentation.

Signature 
<Snippet attribute={string} hit={object}  // Optional propshighlightedTagName={ReactType} nonHighlightedTagName={ReactType} separator={ReactNode} classNames={object} ...props={ComponentProps<'span'>} />
Import
Copy 
1 
import{Snippet}from'react-instantsearch';
See code examples
See live example

About this widget

<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, first set them from the Algolia dashboard, the CLI, or with the API (using the attributesToSnippet parameter):

Copy 
1 
<ConfigureattributesToSnippet={['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:

Copy 
1 2 3 4 5 6 7 
{"_snippetResult":{"attributeName":{"value":"..."}}}

Examples

Copy 
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 
importReactfrom'react';import{liteClientasalgoliasearch}from'algoliasearch/lite';import{InstantSearch,Hits,Snippet}from'react-instantsearch';constsearchClient=algoliasearch('YourApplicationID','YourSearchOnlyAPIKey');functionHit({hit}){return(<article><Snippethit={hit}attribute="description"/></article>);}functionApp(){return(<InstantSearchindexName="instant_search"searchClient={searchClient}><HitshitComponent={Hit}/></InstantSearch>);}

Props

attribute
type: keyof THit
Required

The attribute to snippet in the record.

For deeply nested objects, 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 highlight is an array.

Copy 
1 2 3 4 
<Snippet// ...separator=" - "/>
classNames
type: Partial<SnippetClassNames>
Optional

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.
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 v7
close