@bishal-shrestha/react-typewriter
Version:
A flexible and scalable React component for typing effect with multi-line support
119 lines (97 loc) • 5.59 kB
Markdown
# React Typewriter <img src="https://github.com/user-attachments/assets/bffc5afa-7adb-4aa4-91b8-3dd427595760" height="40px" style="height: 40px;">
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](https://www.npmjs.com/package/@bishal-shrestha/react-typewriter)
[View Website](https://react-typewriter-docs.netlify.app/)
## 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
```bash
npm install @bishal-shrestha/react-typewriter
# or
yarn add @bishal-shrestha/react-typewriter
```
## Usage
```tsx
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/) https://react-typewriter-docs.netlify.app/
#### Minimal Example with Styles
```tsx
<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
```tsx
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:
[](https://github.com/sponsors/shrestha-bishal)
[](https://www.buymeacoffee.com/shresthabishal)
[](https://thanks.dev/gh/shrestha-bishal)
## License
This project is licensed under the [MIT License](./LICENSE).
## Author
Bishal Shrestha
[](https://github.com/shrestha-bishal)
[](https://github.com/shrestha-bishal/react-typewriter)
[Website](https://react-typewriter-docs.netlify.app)
© 2025 Bishal Shrestha, All rights reserved