Skip to main content
The <Highlight> component displays highlighted parts of a search result attribute.

​
Import

import { Highlight } from 'react-instantsearch';

​
Props

​
hit
Hit
required
The search result object containing highlight information.
<Highlight hit={hit} attribute="name" />
​
attribute
string | string[]
required
The attribute to highlight. Can be a string or array for nested attributes.
// Simple attribute
<Highlight hit={hit} attribute="name" />

// Nested attribute
<Highlight hit={hit} attribute={['author', 'name']} />
​
highlightedTagName
string
default:"mark"
The HTML tag to use for highlighted parts.
<Highlight hit={hit} attribute="name" highlightedTagName="em" />
​
nonHighlightedTagName
string
default:"span"
The HTML tag to use for non-highlighted parts.
<Highlight
  hit={hit}
  attribute="name"
  nonHighlightedTagName="span"
/>
​
separator
string
default:", "
The separator to use when the attribute is an array.
<Highlight hit={hit} attribute="tags" separator=" | " />
​
classNames
object
CSS classes to customize the component styling.

​
Example

import { InstantSearch, SearchBox, Hits, Highlight } from 'react-instantsearch';
import { liteClient as algoliasearch } from 'algoliasearch/lite';

const searchClient = algoliasearch(
  'YourApplicationID',
  'YourSearchOnlyAPIKey'
);

function Hit({ hit }) {
  return (
    <article>
      <h1>
        <Highlight hit={hit} attribute="name" />
      </h1>
      <p>
        <Highlight hit={hit} attribute="description" />
      </p>
    </article>
  );
}

function App() {
  return (
    <InstantSearch searchClient={searchClient} indexName="products">
      <SearchBox />
      <Hits hitComponent={Hit} />
    </InstantSearch>
  );
}

​
With Custom Styling

function Hit({ hit }) {
  return (
    <article>
      <h1>
        <Highlight
          hit={hit}
          attribute="name"
          highlightedTagName="strong"
          classNames={{
            highlighted: 'text-primary font-bold',
          }}
        />
      </h1>
    </article>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us