Widgets Snippet


Renders any attribute from an hit into its highlighted snippet form when relevant.

Read more about it in the Highlighting results guide.


To use this widget, the attribute name passed to the attribute prop must be present in “Attributes to snippet” on the Algolia dashboard or configured as attributesToSnippet via a set settings call to the Algolia API.


type: string 

location of the highlighted snippet attribute in the hit (the corresponding element can be either a string or an array of strings)

type: object 

hit object containing the highlighted snippet attribute

type: stringdefault: 'em'

tag to be used for highlighted parts of the attribute

type: stringdefault: 'span'

tag to be used for the parts of the hit that are not highlighted

type: nodedefault: ',<space>'

symbol used to separate the elements of the array in case the attribute points to an array of strings.

Example usage

import React from 'react'; import { InstantSearch, SearchBox, Hits, Snippet } from 'react-instantsearch-dom'; const Hit = ({ hit }) => ( <div> <Snippet attribute="description" hit={hit} /> </div> ); const App = () => ( <InstantSearch appId="latency" apiKey="6be0576ff61c053d5f9a3225e2a90f76" indexName="instant_search" > <SearchBox defaultRefinement="adjustable" /> <Hits hitComponent={Hit} /> </InstantSearch> );

CSS classes

.ais-Snippet {}

the root span of the widget

.ais-Snippet-highlighted {}

the highlighted text

.ais-Snippet-nonHighlighted {}

the normal text

Translation keys

This widget has no translations.