highlight-text

The highlightText is a simple helper that wraps text that match a given query with the <Mark> component.

It is commonly used to highlight search results in the Autocomplete, but can also be used in other contexts.

It takes three arguments:

`text`: _string (required)_; the original text to search for highlights
`query`: _string_; a text fragment you want to highlight in the original text
`rest`: _object_; rest props for the `` component

import { Text, highlightText } from '@flixbus/honeycomb-react';

<>
  <Text>{highlightText('Come along with me', 'along')}</Text>
  <Text>{highlightText('And the butterflies and bees', 'flies and be')}</Text>
</>
import { Text, highlightText } from '@flixbus/honeycomb-react';

<>
  <Text>{highlightText('Come along with me', 'along')}</Text>
  <Text>{highlightText('And the butterflies and bees', 'flies and be')}</Text>
</>