UI libraries / React InstantSearch / Widgets

<Highlight>

This is the React InstantSearch v7 documentation. React InstantSearch v7 is the latest version of React InstantSearch and the stable version of React InstantSearch Hooks.

If you were using React InstantSearch v6, you can upgrade to v7.

If you were using React InstantSearch Hooks, you can still use the React InstantSearch v7 documentation, but you should check the upgrade guide for necessary changes.

If you want to keep using React InstantSearch v6, you can find the archived documentation.

Signature 
<Highlight
  attribute={string}
  hit={object}
  // Optional props
  highlightedTagName={ReactType}
  nonHighlightedTagName={ReactType}
  separator={ReactNode}
  classNames={object}
  ...props={ComponentProps<'span'>}
/>
Import
Copy 
1

import { Highlight } from 'react-instantsearch';
See code examples
See live example

About this widget

Displays the highlighted attributes of your search results.

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 { liteClient as algoliasearch } from 'algoliasearch/lite';
import { InstantSearch, Hits, Highlight } from 'react-instantsearch';

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
Required

The highlighted attribute.

Specify a dot-separated value for nested objects, like actor.name
Copy 
1
2
3
4

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

The original hit object provided to the component. It contains all the data for that result, including the highlighted parts.

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

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

The HTML element that wraps the highlight.
Copy 
1
2
3
4

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

The HTML element that wraps the non-highlighted parts of the string.
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

To customize the appearance, override the appropriate class in your widget theme. It’s 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 v7