TextHighlight

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

Usage

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"
    />
);

Props

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: ''