API Reference / React InstantSearch Hooks / <Highlight>

<Highlight>

Signature 
<Highlight
  attribute={keyof THit|string[]}
  hit={THit}
  // Optional props
  highlightedTagName={React.ReactType<any>}
  nonHighlightedTagName={React.ReactType<any>}
  separator={React.ReactNode}
  classNames={Partial<HighlightClassNames>}
  ...props={React.ComponentProps<'span'>}
/>
See code examples
See live example

About this widget

<Highlight> is a widget that displays highlighted attributes of your search results.

Requirements

The required hit prop is an Algolia hit provided by <Hits>, <InfiniteHits> or their Hooks. You can pass a custom object that doesn’t come from Algolia, as long as you follow the expected structure.

Copy 
1
2
3
4
5
6
7

{
  "_highlightResult": {
    "attributeName": {
      "value": "..."
    }
  }
}

Examples

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import React from 'react';
import algoliasearch from 'algoliasearch/lite';
import { InstantSearch, Hits, Highlight } from 'react-instantsearch-hooks-web';

const searchClient = algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey');

function Hit({ hit }) {
  return (
    <article>
      <h1>
        <Highlight attribute="name" hit={hit} />
      </h1>
      <p>${hit.price}</p>
    </article>
  );
}

function App() {
  return (
    <InstantSearch indexName="instant_search" searchClient={searchClient}>
      <Hits hitComponent={Hit} />
    </InstantSearch>
  );
}

Props

attribute
type: keyof THit|string[]
Required

The attribute to highlight in the record.

For deeply nested objects, you can specify a dot-separated value like "actor.name".
Copy 
1
2
3
4

<Highlight
  // ...
  attribute="name"
/>
hit
type: THit
Required

The original hit object provided to the component.

The object must have a _highlightResult[attribute].value property.
Copy 
1
2
3
4

<Highlight
  // ...
  hit={hit}
/>
highlightedTagName
type: React.ReactType<any>
default: "mark"
Optional

The name of the HTML element to wrap the highlighted parts of the string with.
Copy 
1
2
3
4

<Highlight
  // ...
  highlightedTagName="em"
/>
nonHighlightedTagName
type: React.ReactType<any>
default: "span"
Optional

The name of the HTML element to wrap the non-highlighted parts of the string with.
Copy 
1
2
3
4

<Highlight
  // ...
  nonHighlightedTagName="div"
/>
separator
type: React.ReactNode
default: ", "
Optional

The character between each item when the attribute to highlight is an array.
Copy 
1
2
3
4

<Highlight
  // ...
  separator=" - "
/>
classNames
type: Partial<HighlightClassNames>
Optional

CSS classes to pass to the widget’s elements. This is useful to style widgets with class-based CSS frameworks like Bootstrap or Tailwind CSS.

  • root: The root element of the widget.
  • highlighted: The highlighted parts.
  • nonHighlighted: The non-highlighted parts.
  • separator: The separator elements between highlighted parts.
Copy 
1
2
3
4
5
6
7

<Highlight
  // ...
  classNames={{
    root: 'MyCustomHighlight',
    separator: 'MyCustomHighlightSeparator MyCustomHighlightSeparator--subclass',
  }}
/>
...props
type: React.ComponentProps<'span'>
Optional

Any <span> prop to forward to the root element of the widget.
Copy 
1
2
3
4
5

<Highlight
  // ...
  className="MyCustomHighlight"
  title="My custom title"
/>
Did you find this page helpful?
React InstantSearch Hooks v6