Highlight

Highlights case-insensitive literal query matches with semantic mark elements while preserving the original text.

Examples

Default

Search results explain why each result matched.

<Highlight
  query="result"
>
  Search results explain why each result matched.
</Highlight>

Multiple Queries

Highlight several matching terms in the same sentence.

<Highlight
  query={['highlight', 'matching', 'sentence']}
>
  Highlight several matching terms in the same sentence.
</Highlight>

API

Highlight

Highlights case-insensitive literal query matches with semantic mark elements while preserving the original text.

Prop	Type	Default	Description
children*	string	—	Text in which query matches are highlighted.
className	string	—	Additional CSS class names applied to the root span.
data-testid	string	—	Test ID applied to the root span.
query*	string | string[]	—	Literal substring or substrings to highlight. Matching is case-insensitive; empty and whitespace-only queries are ignored.
ref	Ref<HTMLSpanElement>	—	Ref forwarded to the root span.
style	CSSProperties	—	Inline styles applied to the root span.