Highlight given part of a string with mark
Use the Highlight component to highlight substrings within text using the HTML <mark> element.
Pass the text as children and specify which substring(s) to highlight with the highlight prop. Matching is case-insensitive and accent-insensitive by default, and highlights all occurrences of the matched substring. Use the caseInsensitive and accentInsensitive props to opt out.
Highlight This , definitely THIS and also this !
Set caseInsensitive={false} to only match substrings with the same casing as the highlight term:
With case-insensitive matching (default)
With case-sensitive matching (caseInsensitive={false})
Highlight This, definitely THIS and also this !
Set accentInsensitive={false} to require accented characters in the text to match the highlight term exactly:
With accent-insensitive matching (default)
We visited café and cafe .
With accent-sensitive matching (accentInsensitive={false})
To highlight multiple substrings, provide an array of values. When multiple substrings are provided, longer matches take precedence to avoid partial overlaps.
Highlight this and also that
You can assign different colors to different highlighted terms by providing an array of objects with text and color properties:
Error : Invalid input. Warning : Check this field. Success : All tests passed.
Use the wholeWord prop to match only complete words. When enabled, 'the' will not match 'there' or 'theme':
With whole word matching (wholeWord= { true } )
Without whole word matching (default)
The the me is the re
Default Mark styles can be overwritten with the highlightStyles prop, which accepts either an object with styles or a function that receives the theme as a parameter and returns styles:
You can change styles of highlighted part if you do not like default styles
Highlight is based on the Text component - all Text props except color are available. Use the color prop to change the highlight background color, not the text color.