UI libraries / React InstantSearch / Widgets

<Highlight>

A

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 # A

<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 # A

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('AJ0P3S7DWQ', '90dfaaf5755e694f341fe68f6e41a6d4');

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 # A

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