UNPKG

@gfazioli/mantine-text-animate

Version:

The TextAnimate component allows you to animate text with various effects.

76 lines (75 loc) 2.6 kB
import { type BoxProps, type PolymorphicFactory, type StylesApiProps } from '@mantine/core'; import React from 'react'; import { type TypewriterBaseProps } from './use-typewriter'; export type TypewriterStylesNames = 'root' | 'cursor'; export type TypewriterCssVariables = {}; export interface TypewriterComponentProps extends TypewriterBaseProps { /** * The left section to display before the text */ leftSection?: React.ReactNode; /** * Whether to show a cursor * @default true */ withCursor?: boolean; /** * The cursor character or ReactNode * @default "|" */ cursorChar?: React.ReactNode | string; /** * Whether the cursor should blink * @default true */ withBlink?: boolean; } export interface TypewriterProps extends BoxProps, TypewriterComponentProps, StylesApiProps<TypewriterFactory> { } export type TypewriterFactory = PolymorphicFactory<{ props: TypewriterProps; defaultComponent: 'p'; defaultRef: HTMLParagraphElement; stylesNames: TypewriterStylesNames; vars: TypewriterCssVariables; }>; /** * Typewriter Component * * A component that creates a typewriter effect using TextAnimate. */ export declare const Typewriter: (<C = "p">(props: import("@mantine/core").PolymorphicComponentProps<C, TypewriterProps>) => React.ReactElement) & Omit<React.FunctionComponent<(TypewriterProps & { component?: any; } & Omit<any, "component" | keyof TypewriterProps> & { ref?: any; renderRoot?: (props: any) => any; }) | (TypewriterProps & { component: React.ElementType; renderRoot?: (props: Record<string, any>) => any; })>, never> & import("@mantine/core").ThemeExtend<{ props: TypewriterProps; defaultComponent: "p"; defaultRef: HTMLParagraphElement; stylesNames: TypewriterStylesNames; vars: TypewriterCssVariables; }> & import("@mantine/core").ComponentClasses<{ props: TypewriterProps; defaultComponent: "p"; defaultRef: HTMLParagraphElement; stylesNames: TypewriterStylesNames; vars: TypewriterCssVariables; }> & { varsResolver: import("@mantine/core").VarsResolver<{ props: TypewriterProps; defaultComponent: "p"; defaultRef: HTMLParagraphElement; stylesNames: TypewriterStylesNames; vars: TypewriterCssVariables; }>; } & import("@mantine/core").PolymorphicComponentWithProps<{ props: TypewriterProps; defaultComponent: "p"; defaultRef: HTMLParagraphElement; stylesNames: TypewriterStylesNames; vars: TypewriterCssVariables; }> & Record<string, never>;