Widgets Highlight

Description

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

Read more about it in the Highlighting results guide.

Props

attribute*
type: string 

location of the highlighted 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 attribute

tagName
type: stringdefault: 'em'

tag to be used for highlighted parts of the hit

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, Highlight } from 'react-instantsearch-dom'; const Hit = ({ hit }) => ( <div> <Highlight attribute="name" hit={hit} /> </div> ); const App = () => ( <InstantSearch appId="latency" apiKey="6be0576ff61c053d5f9a3225e2a90f76" indexName="instant_search" > <SearchBox defaultRefinement="Pho" /> <Hits hitComponent={Hit} /> </InstantSearch> );

CSS classes

.ais-Highlight {}

root of the component

.ais-Highlight-highlighted {}

part of the text which is highlighted

.ais-Highlight-nonHighlighted {}

part of the text that is not highlighted

Translation keys

This widget has no translations.