Automattic Design System

Components

TextHighlight

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

import { TextHighlight } from '@wordpress/components';

View on Storybook

View source on GitHub

PropsPermalink to this section

NameDefaultDescription
highlight Required''

string

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

text Required''

string

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

ExamplesPermalink to this section

DefaultPermalink to this section

const Default = () => {
    return (
        <TextHighlight
            text="We call the new editor Gutenberg. The entire editing experience has been rebuilt for media rich pages and posts."
            highlight="Gutenberg" />
    );
};