TextHighlight – Automattic Design System

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

View on Storybook

View source on GitHub

Import

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

Props

Name Type Default Required Description

Name	Type	Default	Required	Description
`highlight`	`string`		Yes	The string to search for and highlight within the `text`. Case insensitive. Multiple matches. @default ”
`text`	`string`		Yes	The string of text to be tested for occurrences of then given `highlight`. @default ”

highlight

string

Yes

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

@default ”

text

string

Yes

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

@default ”

Examples

Default

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