@yamada-ui/highlight/dist/highlight.d.ts

Yamada UI highlight component

import * as _yamada_ui_core from '@yamada-ui/core';
import { HTMLUIProps, ThemeProps, FC } from '@yamada-ui/core';
import { TextProps } from '@yamada-ui/typography';
import { ReactNode } from 'react';

interface Options {
    query: string | string[];
    text: string;
}
interface Chunk {
    match: boolean;
    text: string;
}
declare const useHighlight: ({ query, text }: Options) => Chunk[];
interface HighlightProps extends Omit<TextProps, "children"> {
    /**
     * Accepts a string or a function. If it's a function, it should return a `ReactNode` and accept an array of `Chunk` objects as its argument.
     */
    children: ((props: Chunk[]) => ReactNode) | string;
    /**
     * Can be a single string or an array of strings. These are the terms that are highlighted in the text.
     */
    query: string | string[];
    /**
     * If `true`, `Fragment` is used for rendering.
     *
     * @default false
     */
    fragment?: boolean;
    /**
     * If `true`, `Fragment` is used for rendering.
     *
     * @default false
     *
     * @deprecated Use `fragment` instead.
     */
    isFragment?: boolean;
    /**
     * Properties passed to the Mark component which is used to highlight the matched terms.
     */
    markProps?: MarkProps;
}
/**
 * `Highlight` is a component that highlights specified strings within text. By default, it renders a `p` element.
 *
 * @see Docs https://yamada-ui.com/components/typography/highlight
 */
declare const Highlight: FC<HighlightProps>;
interface MarkProps extends HTMLUIProps<"mark">, ThemeProps<"Mark"> {
}
declare const Mark: _yamada_ui_core.Component<"mark", MarkProps>;

export { Highlight, type HighlightProps, Mark, type MarkProps, useHighlight };