@rusyar/react-typewriter

A simple and highly customizable React component that creates a typewriter animation for your text. Built with TypeScript, minimal dependencies, and designed for modern React applications.

Features

• Lightweight: Minimal dependencies and optimized for performance.
• Easy to Use: Get started with just a single line of code.
• Highly Customizable: Control the speed, delay, cursor style, HTML tags, and more.
• Synchronization: Easily sync multiple Typewriter components to create sequential animations.
• TypeScript: Written in TypeScript with strict type safety.
• SSR/Next.js Friendly: Fully compatible with Server-Side Rendering thanks to the 'use client' directive.

Installation

npm install @rusyar/react-typewriter

or

yarn add @rusyar/react-typewriter

Usage

Basic Usage

This is all you need to get started.

import { Typewriter } from '@rusyar/react-typewriter';

const App = () => {
  return <Typewriter text="Hello, World! This is a simple typewriter." />;
};

Advanced Customization

Customize the appearance, speed, and cursor style.

import { Typewriter } from '@rusyar/react-typewriter';

const App = () => {
  return (
    <Typewriter
      text="This is a customized typewriter..."
      tagName="h2"
      speed={150}
      delay={500}
      size="2rem"
      color="#2c3e50"
      cursorColor="#3498db"
      cursorType="line"
      cursorAnimation="expand"
    />
  );
};

Syncing Multiple Typewriters

Use the useSyncState hook to create sequential animations. This is perfect for dialogues or step-by-step instructions.

import { Typewriter, useSyncState } from '@rusyar/react-typewriter';

const App = () => {
  // 1. Initialize the hook with the total number of steps.
  const syncState = useSyncState(3);

  return (
    <div>
      {/* 2. Pass the state and order to each component. */}
      <Typewriter
        text="First, this sentence will type out."
        sync={{ order: 1, syncState }}
      />
      <br />
      <Typewriter
        text="Second, this one will appear after a short delay."
        delay={500}
        sync={{ order: 2, syncState }}
      />
      <br />
      <Typewriter
        text="Finally, the sequence is complete."
        delay={500}
        sync={{ order: 3, syncState }}
      />
    </div>
  );
};

API Reference (Props)

Contributing

Contributions are welcome! If you find a bug or have a feature request, please open an issue.

License

This project is licensed under the MIT License.