Docs
Typing Text
Typing Text
Displays a beautiful Typing Text.
Installation
Copy and paste the cn util code into your project.
import { ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
Copy and paste the Typing Text code into your project.
API Reference
Props
| Prop | Type | Description |
|---|---|---|
| text | string | typing text words. |
| delay | number | animated delay time |
| repeat | boolean | If true, the text will be erased after typing and then typed again. |
| cursor | ReactNode | Custom cursor to show at the end of the text. |
| className | string | Additional classes for the Text. |
| grow | boolean | If true, the container will grow to fit the text as it types |
| alwaysVisibleCount | number | Number of characters to keep always visible |
| smooth | boolean | If true, the typing effect will be smooth instead of typing one character at a time. |
| waitTime | number | Time to wait before starting the next cycle of typing |
| onComplete | () => void | Callback function to be called when the typing is complete |
| hideCursorOnComplete | boolean | If true, the cursor will be hidden after typing is complete |