Highlight

Visually highlights matched terms in search results.

This is the React InstantSearch v7 documentation. If you’re upgrading from v6, see the upgrade guide. If you were using React InstantSearch Hooks, this v7 documentation applies—just check for necessary changes. To continue using 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

JavaScript

import { Highlight } from "react-instantsearch";

See this widget in action

Preview this widget and its behavior.

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.

JSON

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

Examples

JavaScript

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 · keyof THit · required

The highlighted attribute.

Specify a dot-separated value for nested objects, like actor.name.

JavaScript

<Highlight
  // ...
  attribute="name"
/>

hit · 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.

JavaScript

<Highlight
  // ...
  hit={hit}
/>;

highlightedTagName · React.ReactType<any> · default: "mark"

The HTML element that wraps the highlight.

JavaScript

<Highlight
  // ...
  highlightedTagName="em"
/>;

nonHighlightedTagName · React.ReactType<any> · default: "span"

The HTML element that wraps the non-highlighted parts of the string.

JavaScript

<Highlight
  // ...
  nonHighlightedTagName="div"
/>;

separator · React.ReactNode · default: ", "

The character between each item when the attribute to highlight is an array.

JavaScript

<Highlight
  // ...
  separator=" - "
/>;

classNames · Partial<HighlightClassNames>

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.

JavaScript

<Highlight
  // ...
  classNames={{
    root: "MyCustomHighlight",
    separator:
      "MyCustomHighlightSeparator MyCustomHighlightSeparator--subclass",
  }}
/>;

...props · React.ComponentProps<'span'>

Any <span> prop to forward to the root element of the widget.

JavaScript

<Highlight
  // ...
  className="MyCustomHighlight"
  title="My custom title"
/>;