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