@mantine/core/lib/components/Highlight/Highlight.d.ts

React components library focused on usability, accessibility and developer experience

import { MantineColor, MantineTheme, PolymorphicFactory } from '../../core';
import { TextProps, TextStylesNames, TextVariant } from '../Text';
export interface HighlightTerm {
    /** Text to highlight */
    text: string;
    /** Background color for this specific term. Key of `theme.colors` or any valid CSS color */
    color?: MantineColor | string;
}
export interface HighlightProps extends Omit<TextProps, 'color'> {
    /**
     * Substring(s) to highlight in `children`. Can be:
     * - string: single term
     * - string[]: multiple terms with same color
     * - HighlightTerm[]: multiple terms with custom colors per term
     *
     * - Matching is case-insensitive
     * - Regex special characters are automatically escaped
     * - When multiple substrings are provided, longer matches take precedence
     * - Empty strings and whitespace-only strings are ignored
     */
    highlight: string | string[] | HighlightTerm[];
    /**
     * Default background color for all highlighted text.
     * Key of `theme.colors` or any valid CSS color, passed to `Mark` component.
     * Can be overridden per term when using HighlightTerm objects.
     * @default 'yellow'
     */
    color?: MantineColor | string;
    /** Styles applied to `mark` elements */
    highlightStyles?: React.CSSProperties | ((theme: MantineTheme) => React.CSSProperties);
    /** String in which to highlight substrings */
    children: string;
    /**
     * Only match whole words (adds word boundaries to regex).
     * When enabled, 'the' will not match 'there'.
     * @default false
     */
    wholeWord?: boolean;
}
export type HighlightFactory = PolymorphicFactory<{
    props: HighlightProps;
    defaultRef: HTMLDivElement;
    defaultComponent: 'div';
    stylesNames: TextStylesNames;
    variant: TextVariant;
}>;
export declare const Highlight: (<C = "div">(props: import("../..").PolymorphicComponentProps<C, HighlightProps>) => React.ReactElement) & Omit<import("react").FunctionComponent<(HighlightProps & {
    component?: any;
} & Omit<any, "component" | keyof HighlightProps> & {
    ref?: any;
    renderRoot?: (props: any) => any;
}) | (HighlightProps & {
    component: React.ElementType;
    renderRoot?: (props: Record<string, any>) => any;
})>, never> & import("../..").ThemeExtend<{
    props: HighlightProps;
    defaultRef: HTMLDivElement;
    defaultComponent: "div";
    stylesNames: TextStylesNames;
    variant: TextVariant;
}> & import("../..").ComponentClasses<{
    props: HighlightProps;
    defaultRef: HTMLDivElement;
    defaultComponent: "div";
    stylesNames: TextStylesNames;
    variant: TextVariant;
}> & import("../..").PolymorphicComponentWithProps<{
    props: HighlightProps;
    defaultRef: HTMLDivElement;
    defaultComponent: "div";
    stylesNames: TextStylesNames;
    variant: TextVariant;
}> & Record<string, never>;