In this article

Highlights occurrences of a given string within another string of text. Wraps each match with a <mark> tag which provides browser default styling.


Pass in the text and the highlight string to be matched against.

In the example below, the string Gutenberg would be highlighted twice.

import { TextHighlight } from '@wordpress/components';

const MyTextHighlight = () => (
        text="Why do we like Gutenberg? Because Gutenberg is the best!"


The component accepts the following props.

highlight: string

The string to search for and highlight within the text. Case insensitive. Multiple matches.

  • Required: Yes
  • Default: ''

text: string

The string of text to be tested for occurrences of then given highlight.

  • Required: Yes
  • Default: ''