Skip to main content
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";

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"
/>;
I