Demo
Usage
Import the HighlightMatch primitive. Render the text as children of the HighlightMatch, then pass the word you want to highlight to the query prop.
This is the highlighted part.
import { HighlightMatch } from '@aws-amplify/ui-react'; export const HighlightMatchDefaultExample = () => { return ( <HighlightMatch query="highlighted part"> This is the highlighted part. </HighlightMatch> ); }; Note: The query for the text is case insensitive.
Styling
Target classes
| Class | Description |
|---|---|
amplify-highlightmatch | Top level element that wraps the HighlightMatch primitive |
amplify-highlightmatch__highlighted | Class applied to the highlighted text of the HighlightMatch primitive |
--amplify-components-highlightmatch-highlighted-font-weight