typingfx/dist/client/type-out/type-out.d.ts

Customizable, smooth, and snappy typing animations for React — built for natural, human-like effects with minimal config.

import { HTMLProps, ReactNode } from "react";
import { Optional } from "@m2d/core";
export type ComponentAnimation = {
    wrapper: keyof HTMLElementTagNameMap;
    props?: Omit<HTMLProps<HTMLElement>, "children">;
};
/**
 * Props for the TypeOut component.
 * Provides fine-grained control over typing behavior, repetition, and accessibility.
 */
interface DefaultTypeOutProps extends HTMLProps<HTMLDivElement> {
    children: ReactNode;
    /** Typing speed in characters per second. @default 20 */
    speed: number;
    /** Deletion speed in characters per second. @default 40 */
    delSpeed: number;
    /** Whether to hide the blinking cursor. @default false */
    noCursor: boolean;
    /** Whether to hide the blinking cursor after completing the anim. @default false */
    noCursorAfterAnimEnd: boolean;
    /** Sequence of steps (lines or phrases) to animate through. */
    steps: ReactNode[];
    /** Number of times to repeat the animation. @default Infinity */
    repeat: number;
    /** Whether to override user's reduced motion preference. @default false */
    force?: boolean;
    /** Controls whether the animation is paused. */
    paused: boolean;
    /** @beta Preference for animating custom components in steps or children */
    componentAnimation?: ComponentAnimation;
}
export type TypeOutProps = Optional<DefaultTypeOutProps>;
/**
 * TypeOut component — main entry point.
 * Handles prefers-reduced-motion and conditional rendering.
 *
 * @example
 * ```tsx
 * <TypeOut steps={["Hello", "World"]} />
 * ```
 */
export declare const TypeOut: (props_: TypeOutProps) => import("react/jsx-runtime").JSX.Element;
export {};