@gfazioli/mantine-text-animate/dist/types/Typewriter/use-typewriter.d.ts

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

export interface TypewriterBaseProps {
    /**
     * The text or array of texts to display in typewriter effect
     */
    value: string | string[];
    /**
     * Controls if the animation is running (`true`) or reset (false)
     * @default true
     */
    animate?: boolean;
    /**
     * Whether to display text in multiple lines
     * @default false
     */
    multiline?: boolean;
    /**
     * Animation speed multiplier (higher = faster)
     * @default 1
     */
    speed?: number;
    /**
     * The delay between text changes in milliseconds (when using multiple texts)
     * @default 2000
     */
    delay?: number;
    /**
     * Whether to loop through the texts
     * @default true
     */
    loop?: boolean;
    /**
     * Callback function to be called when the typing animation ends
     */
    onTypeEnd?: () => void;
    /**
     * Callback function to be called when the typing animation is looped
     * and the animation is about to start again
     */
    onTypeLoop?: () => void;
    /**
     * Callback function called for each character typed
     * @param char The character that was typed
     * @param index The index of the character in the current text
     */
    onCharType?: (char: string, index: number) => void;
    /**
     * Map of character indices to custom pause durations (in milliseconds)
     * The typing will pause for the specified duration at the given character index
     * @example { 5: 1000, 10: 500 } — pause 1s after char 5, 500ms after char 10
     */
    pauseAt?: Record<number, number>;
    /**
     * Whether to play a mechanical keyboard click sound on each character typed
     * Uses Web Audio API to synthesize sounds. Requires user gesture to start AudioContext.
     * Respects `prefers-reduced-motion`.
     * @default false
     */
    withSound?: boolean;
    /**
     * Volume of the typing sound (0 to 1)
     * @default 0.3
     */
    soundVolume?: number;
}
export interface UseTypewriterResult {
    /**
     * The current text being displayed
     * If multiline is true, this will be an array of strings
     */
    text: string | string[];
    /**
     * Whether the typewriter is currently typing
     */
    isTyping: boolean;
    /**
     * Start the typewriter animation
     */
    start: () => void;
    /**
     * Stop the typewriter animation
     */
    stop: () => void;
    /**
     * Reset the typewriter to its initial state
     */
    reset: () => void;
}
/**
 * A hook that creates a typewriter effect
 */
export declare function useTypewriter(options: TypewriterBaseProps): UseTypewriterResult;