---
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,
    },
  }}
/>