@gfazioli/mantine-text-animate
Version:
The TextAnimate component allows you to animate text with various effects.
105 lines (104 loc) • 3.38 kB
TypeScript
import { type BoxProps, type MantineSize, type PolymorphicFactory, type StylesApiProps } from '@mantine/core';
import React from 'react';
export type SpinnerStylesNames = 'root' | 'char' | 'container';
export type SpinnerCssVariables = {
root: '--text-animate-spinner-radius' | '--text-animate-spinner-speed' | '--text-animate-spinner-char-offset';
};
export interface SpinnerBaseProps {
/**
* The text content to animate.
* Pass a string for text processing (repeat/reverse), or an array of ReactNode
* for custom content (repeat/reverse will be skipped).
* When passing ReactNode[], you must provide an explicit `aria-label`.
*/
children: string | React.ReactNode[];
/**
* The radius of the circle in pixels or Mantine size
* @default "md"
*/
radius?: MantineSize | number | string;
/**
* The rotation speed multiplier (higher = faster)
* @default 2
*/
speed?: number;
/**
* The rotation direction
* @default "clockwise"
*/
direction?: 'clockwise' | 'counterclockwise';
/**
* Whether the spinner is currently rotating
* @default true
*/
animate?: boolean;
/**
* Character offset in degrees (0-360)
* @default 0
*/
charOffset?: number;
/**
* Whether to reverse the text direction
* @default false
*/
reverseText?: boolean;
/**
* Whether to repeat the text to fill the circle
* @default false
*/
repeatText?: boolean;
/**
* Number of times to repeat the text (only used if repeatText is true)
* @default 1
*/
repeatCount?: number;
}
export interface SpinnerProps extends BoxProps, SpinnerBaseProps, StylesApiProps<SpinnerFactory> {
}
export type SpinnerFactory = PolymorphicFactory<{
props: SpinnerProps;
defaultComponent: 'div';
defaultRef: HTMLDivElement;
stylesNames: SpinnerStylesNames;
vars: SpinnerCssVariables;
}>;
/**
* Spinner Component
*
* A component that displays text in a circle and rotates it.
*/
export declare const Spinner: (<C = "div">(props: import("@mantine/core").PolymorphicComponentProps<C, SpinnerProps>) => React.ReactElement) & Omit<React.FunctionComponent<(SpinnerProps & {
component?: any;
} & Omit<any, "component" | keyof SpinnerProps> & {
ref?: any;
renderRoot?: (props: any) => any;
}) | (SpinnerProps & {
component: React.ElementType;
renderRoot?: (props: Record<string, any>) => any;
})>, never> & import("@mantine/core").ThemeExtend<{
props: SpinnerProps;
defaultComponent: "div";
defaultRef: HTMLDivElement;
stylesNames: SpinnerStylesNames;
vars: SpinnerCssVariables;
}> & import("@mantine/core").ComponentClasses<{
props: SpinnerProps;
defaultComponent: "div";
defaultRef: HTMLDivElement;
stylesNames: SpinnerStylesNames;
vars: SpinnerCssVariables;
}> & {
varsResolver: import("@mantine/core").VarsResolver<{
props: SpinnerProps;
defaultComponent: "div";
defaultRef: HTMLDivElement;
stylesNames: SpinnerStylesNames;
vars: SpinnerCssVariables;
}>;
} & import("@mantine/core").PolymorphicComponentWithProps<{
props: SpinnerProps;
defaultComponent: "div";
defaultRef: HTMLDivElement;
stylesNames: SpinnerStylesNames;
vars: SpinnerCssVariables;
}> & Record<string, never>;