retro-react
Version:
A React component library for building retro-style websites
84 lines (83 loc) • 2.36 kB
TypeScript
/** @jsxImportSource theme-ui */
import { CSSProperties } from 'react';
import { ThemeUICSSObject } from 'theme-ui';
import { TextProps } from '../text/index';
interface TypewriterTextProps extends Omit<TextProps, 'children'> {
/**
* The text to be displayed as typewriter text.
*/
text: string;
/**
* The typing speed in milliseconds. Determines how quickly the text is typed.
*
* @default 100
*/
typingSpeed?: number;
/**
* The erasing speed in milliseconds. Determines how quickly the text is erased when repeating.
*
* @default 50
*/
erasingSpeed?: number;
/**
* Repeatedly type the text. When true, text will be typed, paused, erased, and repeated.
*
* @default false
*/
repeat?: boolean;
/**
* Pause duration in milliseconds after typing is complete before erasing (when repeat is true).
*
* @default 2000
*/
pauseDuration?: number;
/**
* Pause duration in milliseconds after erasing is complete before starting again (when repeat is true).
*
* @default 1000
*/
restartPause?: number;
/**
* Show a blinking cursor at the end of the text.
*
* @default true
*/
showCursor?: boolean;
/**
* The cursor character to display.
*
* @default '|'
*/
cursor?: string;
/**
* The color of the text.
*
* @default '#000000'
*/
color?: CSSProperties['color'];
sx?: ThemeUICSSObject;
}
/**
* TypewriterText creates an authentic retro typing effect reminiscent of classic computer terminals.
*
* Features:
* - Smooth typing animation with configurable speed
* - Optional repeat functionality with erase effect
* - Blinking cursor (classic terminal style)
* - Proper cleanup and state management
* - Retro monospace styling
*
* @example
* // Basic typing effect
* <TypewriterText text="Hello, World!" />
*
* // Repeating with custom timing
* <TypewriterText
* text="Welcome to the retro terminal..."
* repeat
* typingSpeed={80}
* erasingSpeed={40}
* />
*/
export declare const TypewriterText: import("react").ForwardRefExoticComponent<TypewriterTextProps & import("react").RefAttributes<HTMLDivElement>>;
export {};