Highlight

Used to emphasize specific words or phrases within a larger body of text.

Usage

The Highlight component takes a text prop containing the full text and a query prop specifying the text to highlight. It then renders the text with highlighted portions wrapped in <mark> tags.

Example not found

Example not found

Example not found

Example not found

Multiple Queries

You can highlight multiple terms by passing an array of strings to the query prop.

Example not found

Example not found

Example not found

Example not found

Case Sensitivity

By default, the highlighting is case-sensitive. Use the ignoreCase prop to make it case-insensitive.

Example not found

Example not found

Example not found

Example not found

Match All

By default, the Highlight component matches the first occurrence of the query. To highlight all occurrences of the query, set the matchAll prop to true.

Example not found

Example not found

Example not found

Example not found

Exact Match

By default, the Highlight component matches partial words. Use the exactMatch prop to only highlight whole words that match the query exactly.

Example not found

Example not found

Example not found

Example not found

API Reference

Highlight

Customization

The Highlight component wraps matched text in <mark> tags.

<Highlight text="The quick brown fox jumps over the lazy fox." query="fox" className="highlighted-text" />

Style the mark tags using CSS to customize the appearance of highlighted text.

.highlighted-text {
  background-color: yellow;
}