TypingEffect
The TypingEffect
component renders a typing effect animation for a given text.
Import
import {TypingEffect} from "cui-react";
Example
Render a basic typing effect:
Code:
<TypingEffect text="Hello, world!" />
Customizing
You can customize the TypingEffect component using the following props:
text (required):
The text to display with the typing effect.speed (optional):
The speed of typing in milliseconds. Defaults to 100.delay (optional):
The delay before starting to delete the text (if looping) in milliseconds. Defaults to 1000.loop (optional):
Whether the typing effect should loop. Defaults to false.cursorColor (optional):
The color of the cursor. Defaults to black.
Example: Custom Speed, Delay, and Loop
Code:
<TypingEffect
text="This text will type and delete in a loop!"
speed={50}
delay={2000}
loop={true}
cursorColor="blue"
/>
This example renders a typing effect with custom speed, delay, and looping behavior.
Props
-
text Type: string Description: The text to display with the typing effect.
-
speed Type: number Default: 100 Description: The speed of typing in milliseconds.
-
delay Type: number Default: 1000 Description: The delay before starting to delete the text (if looping) in milliseconds.
-
loop Type: boolean Default: false Description: Whether the typing effect should loop.
-cursorColor Type: string Default: black Description: The color of the cursor.