TextHighlight Edit

Highlights occurances 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.

text text

The string of text to be tested for occurances 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