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

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