react-dynamic-typewriter v1.0.4

React Dynamic TypeWriter

A lightweight and customizable React component that creates a typewriter effect for your text content.

Installation

npm install react-dynamic-typewriter

or

yarn add react-dynamic-typewriter

Demo

Demo

Basic Typewriter Animation

Single Text Support

Dynamic Content Updates

Features

• Smooth typing animation
• Support for multiple text strings
• Customizable typing and deletion speeds
• Support for multiline text
• Blinking cursor effect
• Configurable delays and wait times
• Memoized rendering for optimal performance

Usage

import TypeWriter from 'react-dynamic-typewriter';

// Basic usage
function Example() {
  const content = [
    "Hello World!",
    "This is a typing animation...",
    "Pretty cool, right?"
  ];

  return (
    <TypeWriter
      content={content}
      writeSpeed={100}
      deleteSpeed={50}
      waitTime={2000}
    />
  );
}

// Static content (no deletion)
function StaticExample() {
  const content = [
    "This text will be typed out and remain static."
  ];

  return (
    <TypeWriter
      content={content}
      writeSpeed={100}
    />
  );
}

Props

Examples

Multiple Lines

const content = [
  "This is line one\nThis is line two",
  "Multiple lines are supported!"
];

<TypeWriter
  content={content}
  writeSpeed={100}
  deleteSpeed={50}
  waitTime={2000}
/>

Dynamic Content with State

function DynamicContent() {
  const [messages, setMessages] = useState(['Initial message']);

  return (
    <TypeWriter
      content={messages}
      writeSpeed={100}
      deleteSpeed={50}
      waitTime={2000}
    />
  );
}

Browser Support

• Chrome
• Firefox
• Safari
• Edge
• Opera

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.