TextHighlight Edit

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 = () => (
    <TextHighlight
        text="Why do we like Gutenberg? Because Gutenberg is the best!"
        highlight="Gutenberg"
    />
);

The component accepts the following props.

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

• Required: Yes
• Default: ''

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

• Required: Yes
• Default: ''