Highlight | React InstantSearch V6 (Deprecated)

Signature

<Highlight
  attribute={__string|array_}
  hit={object}
  // Optional parameters
  tagName={string}
  nonHighlightedTagName={string}
  separator={React.Node}
/>

About this widget

The Highlight widget displays highlighted attributes of your search results.

Requirements

The required hit prop is an object as provided by Hits, InfiniteHits (or their connectors). You can use this widget even with a different object than the Algolia results. The only requirement is that the provided value must have the following structure:

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

Examples

1
2
3
4
5
import { Hits, Highlight } from 'react-instantsearch-dom';

const Hit = ({ hit }) => <Highlight hit={hit} attribute="name" />;

<Hits hitComponent={Hit} />

Props

attribute

The attribute of the record to highlight. You can give a dot-separated value for deeply nested objects, like actor.name.

If an attribute name contains a period (.), you can opt-out of the splitting on periods by passing the attribute path as an array, like ['actor.name', 'fr'].

1
2
3
4
<Highlight
  // ...
  attribute="name"
/>

hit

The original hit object, given from Hits or connectHits. Needs a _highlightResult[attribute].value property to work.

1
2
3
4
<Highlight
  // ...
  hit={hit}
/>

tagName

The HTML tag to use for the highlighted parts of the string.

For example: mark.

1
2
3
4
<Highlight
  // ...
  tagName="mark"
/>

nonHighlightedTagName

The HTML tag to use for the non-highlighted parts of the string.

For example: span.

1
2
3
4
<Highlight
  // ...
  nonHighlightedTagName="span"
/>

separator

The character that joins the items if the attribute to highlight is an array.

1
2
3
4
<Highlight
  // ...
  separator=" - "
/>