Highlight

Usage

Use Highlight component to highlight substring in given string with mark tag.

Pass main string as children to Highlight component and string part that should be highlighted to highlight prop. If main string does not include highlight part, it will be ignored. Component ignores trailing whitespace and highlights all matched characters sequence.

You can change color of mark by passing highlightColor prop with theme color.

<Highlight highlight="this">
  Highlight This, definitely THIS and also this!
</Highlight>

Highlight multiple substrings

You can highlight multiple substrings by providing an array of values:

<Highlight highlight={['this', 'that']}>Highlight this and also that</Highlight>

Text props

Highlight accepts the same props as Text component:

<Highlight
  component="a"
  href="https://mantine.dev"
  target="_blank"
  highlight="mantine"
  variant="link"
  weight={500}
>
  Mantine website
</Highlight>