Highlight

Highlights specified substrings within text.

Usage

Use the Highlight component to emphasize substrings in text that match the provided query.

import { Text, Highlight } from "@elemnts-ui/react";

<Text>
  <Highlight query="..." text="..." />
</Text>

Set the query prop to an array of strings to highlight multiple substrings.

Use the Highlight component to emphasize terms in search results that match the user's query.

This example demonstrates how to wrap highlighted text with a custom squiggle image for a more decorative effect.

Prop	Type	Default
variant	`primary \| secondary \| tertiary \| underline`	`primary`
query	`string \| string[]`	`undefined`
text	`string`	`undefined`
ignoreCase	`boolean`	`undefined`
matchAll	`boolean`	`undefined`
exactMatch	`boolean`	`undefined`