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.

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

Top ↑

Props #Props

The component accepts the following props.

Top ↑

text #text

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

• Type: String
• Required: Yes

Top ↑

highlight #highlight

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

• Type: String
• Required: Yes