InstantSearch / React / V6 / API reference

Highlight | React InstantSearch V6 (Deprecated)

Deprecated content
This documentation is for a deprecated version of React InstantSearch. Some features and settings may be missing or their usage may have changed. Refer to the documentation for the latest version of React InstantSearch for up-to-date information.

Signature

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

Required
Type: string

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

Required
Type: object

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

Optional
Type: string

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

For example: mark.

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

nonHighlightedTagName

Optional
Type: string

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

For example: span.

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

separator

Optional
Type: React.Node

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

1
2
3
4
<Highlight
  // ...
  separator=" - "
/>
Did you find this page helpful?