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

<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';

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

Parameter Description
attribute
type: keyof THit
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

The CSS classes you can override and pass to the widget’s elements. 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