@gfazioli/mantine-text-animate
Version:
The TextAnimate component allows you to animate text with various effects.
87 lines (86 loc) • 2.82 kB
TypeScript
import { type BoxProps, type MantineColor, type PolymorphicFactory, type StylesApiProps } from '@mantine/core';
import React from 'react';
export type HighlightStylesNames = 'root';
export type HighlightCssVariables = {
root: '--text-animate-highlight-color' | '--text-animate-highlight-speed' | '--text-animate-highlight-height' | '--text-animate-highlight-offset';
};
export interface HighlightBaseProps {
/**
* The text content to display with highlight
*/
children: React.ReactNode;
/**
* Highlight color
* @default '#ffeb3b'
*/
color?: MantineColor;
/**
* Whether the highlight animation is active
* @default true
*/
animate?: boolean;
/**
* Animation speed multiplier (higher = faster)
* @default 1
*/
speed?: number;
/**
* Height of the highlight bar
* @default '40%'
*/
highlightHeight?: string;
/**
* Vertical offset from top
* @default '60%'
*/
highlightOffset?: string;
}
export interface HighlightProps extends BoxProps, HighlightBaseProps, StylesApiProps<HighlightFactory> {
}
export type HighlightFactory = PolymorphicFactory<{
props: HighlightProps;
defaultComponent: 'span';
defaultRef: HTMLSpanElement;
stylesNames: HighlightStylesNames;
vars: HighlightCssVariables;
}>;
/**
* Highlight Component
*
* A component that displays text with an animated highlight (marker) effect.
*/
export declare const Highlight: (<C = "span">(props: import("@mantine/core").PolymorphicComponentProps<C, HighlightProps>) => React.ReactElement) & Omit<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("@mantine/core").ThemeExtend<{
props: HighlightProps;
defaultComponent: "span";
defaultRef: HTMLSpanElement;
stylesNames: HighlightStylesNames;
vars: HighlightCssVariables;
}> & import("@mantine/core").ComponentClasses<{
props: HighlightProps;
defaultComponent: "span";
defaultRef: HTMLSpanElement;
stylesNames: HighlightStylesNames;
vars: HighlightCssVariables;
}> & {
varsResolver: import("@mantine/core").VarsResolver<{
props: HighlightProps;
defaultComponent: "span";
defaultRef: HTMLSpanElement;
stylesNames: HighlightStylesNames;
vars: HighlightCssVariables;
}>;
} & import("@mantine/core").PolymorphicComponentWithProps<{
props: HighlightProps;
defaultComponent: "span";
defaultRef: HTMLSpanElement;
stylesNames: HighlightStylesNames;
vars: HighlightCssVariables;
}> & Record<string, never>;