Widgets Snippet

Description

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

Read more about it in the Highlighting results guide.

Requirements

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.

Props

attribute*
type: string 

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

hit*
type: object 

hit object containing the highlighted snippet attribute

tagName
type: stringdefault: 'em'

tag to be used for highlighted parts of the attribute

nonHighlightedTagName
type: stringdefault: 'span'

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

separator
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.