@bishal-shrestha/react-typewriter

v1.0.0

Published

6 months ago

A flexible and scalable React component for typing effect with multi-line support

React Typewriter

A customisable and lightweight React component that simulates a typewriter effect for a list of text lines. Supports typing, line-by-line animation, erasing, looping, and cursor styling.

View Package in npm

View Website

Features

Typewriter animation per character
Multi-line support
Optional erase and loop functionality
Customizable speeds and delays
Optional cursor and cursor customization
Callbacks for line typed and loop completion
Pause and resume control

Installation

npm install @bishal-shrestha/react-typewriter
# or
yarn add @bishal-shrestha/react-typewriter

Usage

import ReactTypewriter from '@bishal-shrestha/react-typewriter';

function App() {
  return (
    <ReactTypewriter
      lines={['Hello, world!', 'This is a typewriter effect.']}
      typingSpeed={50}
      lineDelay={500}
      eraseSpeed={30}
      eraseDelay={1000}
      loop={true}
      showCursor={true}
      cursor="|"
    />
  );
}

App()

Props

| Prop | Type | Default | Description | |------------------|----------------------------------|-------------|-----------------------------------------------------------------------------| | lines | string[] | Required| Array of strings to type line-by-line | | typingSpeed | number | 50 | Typing speed in milliseconds per character | | lineDelay | number | 500 | Delay before moving to the next line (in ms) | | eraseSpeed | number | 30 | Erasing speed in milliseconds per character | | eraseDelay | number | 1000 | Delay before starting to erase (in ms) | | loop | boolean | true | Whether to erase and restart after finishing all lines | | showCursor | boolean | true | Whether to display the blinking cursor | | cursor | string | React.ReactNode | "|" | The cursor character or a custom React node | | className | string | undefined | Optional CSS class for the container | | style | React.CSSProperties | undefined | Optional inline styles for the container | | pause | boolean | false | Temporarily pauses typing or erasing | | onLineTyped | (lineIndex: number) => void | undefined | Callback fired when a line is completely typed | | onLoopComplete | () => void | undefined | Callback fired after a full cycle when loop is enabled |

Demo

Demo Website https://react-typewriter-docs.netlify.app/

Minimal Example with Styles

<ReactTypewriter
  lines={['Fast. Lightweight. React Typewriter.']}
  typingSpeed={60}
  className="my-typewriter"
/>

<style>
.my-typewriter {
  font-family: monospace;
  font-size: 1.25rem;
  color: #00ff99;
}
</style>

How to Pause/Resume

const [paused, setPaused] = useState(false);

<ReactTypewriter
  lines={['Typing will pause... and resume!']}
  pause={paused}
/>
<button onClick={() => setPaused(p => !p)}>
  {paused ? 'Resume' : 'Pause'}
</button>

Funding & Sponsorship

@bishal-shrestha/react-typewriter is an open-source project maintained with care, if you like to support the project please support me through the following: