97 lines
2.1 KiB
Plaintext
97 lines
2.1 KiB
Plaintext
---
|
|
title: Typing Text
|
|
description: A text component that dynamically simulates a typing animation, progressively revealing characters as if typed in real-time.
|
|
author:
|
|
name: imskyleen
|
|
url: https://github.com/imskyleen
|
|
---
|
|
|
|
<ComponentPreview name="typing-text-demo" />
|
|
|
|
## Installation
|
|
|
|
<ComponentInstallation name="typing-text" />
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
<TypingText text="Hello world!" />
|
|
```
|
|
|
|
## Props
|
|
|
|
<TypeTable
|
|
type={{
|
|
className: {
|
|
description: 'The className of the component',
|
|
type: 'string',
|
|
required: false,
|
|
},
|
|
duration: {
|
|
description: 'The duration of the animation',
|
|
type: 'number',
|
|
default: '100',
|
|
required: false,
|
|
},
|
|
delay: {
|
|
description: 'The delay of the animation',
|
|
type: 'number',
|
|
default: '0',
|
|
required: false,
|
|
},
|
|
inView: {
|
|
description: 'Enable animation when in view.',
|
|
type: 'boolean',
|
|
default: 'false',
|
|
required: false,
|
|
},
|
|
inViewMargin: {
|
|
description: 'The margin of the in view.',
|
|
type: 'string',
|
|
required: false,
|
|
default: '0px',
|
|
},
|
|
inViewOnce: {
|
|
description: 'Enable animation when in view once.',
|
|
type: 'boolean',
|
|
required: false,
|
|
default: 'true',
|
|
},
|
|
cursor: {
|
|
description: 'Whether to show a cursor',
|
|
type: 'boolean',
|
|
default: 'false',
|
|
required: false,
|
|
},
|
|
loop: {
|
|
description: 'Whether to loop the animation',
|
|
type: 'boolean',
|
|
default: 'false',
|
|
required: false,
|
|
},
|
|
holdDelay: {
|
|
description: 'The delay of the animation',
|
|
type: 'number',
|
|
default: '1000',
|
|
required: false,
|
|
},
|
|
text: {
|
|
description: 'The text to display',
|
|
type: 'string | string[]',
|
|
required: true,
|
|
},
|
|
cursorClassName: {
|
|
description: 'The className of the cursor',
|
|
type: 'string',
|
|
required: false,
|
|
},
|
|
animateOnChange: {
|
|
description:
|
|
'Whether to restart the animation when the text prop changes',
|
|
type: 'boolean',
|
|
default: 'true',
|
|
required: false,
|
|
},
|
|
}}
|
|
/>
|