Usage
Use Highlight component to highlight a substring in a given string with mark tag.
Pass main string as children to Highlight component and string part that should be highlighted to highlight
prop.
If main string does not include highlight
part, it will be ignored.
Component ignores trailing whitespace and highlights all matched characters sequence.
Highlight This, definitely THIS and also this!
HighlightColor
Highlight multiple substrings
To highlight multiple substrings, provide an array of values:
Highlight this and also that
Change highlight styles
Default Mark styles can be overwritten with highlightStyles
prop, it accepts either function with a subscription to theme
or an object with styles:
You can change styles of highlighted part if you do not like default styles
Text props
Highlight accepts the same props as Text component:
Highlight component props
Name | Type | Description |
---|---|---|
align | "left" | "right" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "center" | "end" | "start" | "justify" | "match-parent" | Sets text-align css property |
children * | string | Full string part of which will be highlighted |
color | DefaultMantineColor | "dimmed" | Key of theme.colors or any valid CSS color |
gradient | MantineGradient | Controls gradient settings in gradient variant only |
highlight * | string | string[] | Substring or an array of substrings to highlight in children |
highlightColor | MantineColor | Color from theme that is used for highlighting |
highlightStyles | CSSObject | ((theme: MantineTheme) => CSSObject) | Styles applied to highlighted part |
inherit | boolean | Inherit font properties from parent element |
inline | boolean | Sets line-height to 1 for centering |
italic | boolean | Adds font-style: italic style |
lineClamp | number | CSS -webkit-line-clamp property |
size | number | "xs" | "sm" | "md" | "lg" | "xl" | Key of theme.fontSizes or number to set font-size in px |
span | boolean | Shorthand for component="span" |
strikethrough | boolean | Add strikethrough styles |
transform | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "none" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "uppercase" | Sets text-transform css property |
truncate | true | "end" | "start" | CSS truncate overflowing text with an ellipsis |
underline | boolean | Underline the text |
variant | "link" | "text" | "gradient" | Link or text variant |
weight | FontWeight | Sets font-weight css property |