react-simple-typewriter-vb

A lightweight React package to create a typewriter effect effortlessly. Perfect for adding dynamic and engaging text animations to your projects.

Features

• 🚀 Simple and easy-to-use API
• ⚡ Lightweight and fast
• 🎨 Customizable typing and deleting speeds
• 🔄 Rotates through multiple strings
• ⚙️ Configurable loop behavior
• 🎭 Smooth delete animation effect
• ✨ Next.js compatible
• 🖥️ Server-side rendering support
• 🎯 Zero dependencies
• 📱 Responsive and accessible
• 🎨 Customizable styling

Installation

Install the package using npm:

1npm install react-simple-typewriter-vb

Or using yarn:

1yarn add react-simple-typewriter-vb

Usage

Here's how to use the TypeWriter component in your React project:

1import React from 'react';
2import { TypeWriter } from 'react-simple-typewriter-vb';
3
4const App = () => {
5  return (
6    <TypeWriter
7      options={{
8        strings: ['Hello, World!', 'Welcome to React Simple Typewriter!'],
9        speed: 100, // Typing speed in ms (default: 50)
10        pause: 2000, // Pause duration in ms before rotating to the next string (default: 1000)
11      }}
12    />
13  );
14};
15
16export default App;

Props

Prop	Type	Default	Description
options	Object	N/A	Options to configure the typewriter behavior.

Options

Option	Type	Default	Description
strings	string[]	[]	Array of strings to type.
speed	number	50	Typing speed in milliseconds.
deleteSpeed	number	30	Deleting speed in milliseconds.
pause	number	1000	Pause duration in milliseconds between strings.
loop	boolean	true	Whether to loop through the strings continuously.

Example

1import React from 'react';
2import { TypeWriter } from 'react-simple-typewriter-vb';
3
4const Example = () => (
5  <TypeWriter
6    options={{
7      strings: ['React is awesome!', 'Try this typewriter effect!'],
8      speed: 75,
9      pause: 1500,
10      loop: false,
11      deleteSpeed: 90,
12    }}
13  />
14);
15
16export default Example;

Advanced Usage

With Custom Styling

You can customize the appearance of the TypeWriter component by wrapping it with your own styled component:

1import React from 'react';
2import { TypeWriter } from 'react-simple-typewriter-vb';
3
4const StyledExample = () => (
5  <div style={{ 
6    fontFamily: 'monospace',
7    fontSize: '2em',
8    color: '#333',
9    padding: '20px'
10  }}>
11    <TypeWriter
12      options={{
13        strings: ['Custom styled typewriter!', 'Make it your own!'],
14        speed: 75,
15        pause: 1500,
16      }}
17    />
18  </div>
19);

With Next.js

The component is fully compatible with Next.js, including server-side rendering:

1// pages/index.tsx
2import { TypeWriter } from 'react-simple-typewriter-vb';
3
4export default function Home() {
5  return (
6    <main>
7      <h1>
8        <TypeWriter
9          options={{
10            strings: ['Welcome to Next.js!', 'Built with TypeWriter'],
11            speed: 50,
12            loop: true,
13          }}
14        />
15      </h1>
16    </main>
17  );
18}

TypeScript Support

The package includes TypeScript definitions out of the box:

1import { TypeWriter, TypewriterProps } from 'react-simple-typewriter-vb';
2
3const options: TypewriterProps['options'] = {
4  strings: ['TypeScript Support!', 'Full type safety!'],
5  speed: 50,
6  pause: 1000,
7  loop: true,
8};
9
10const TypeScriptExample = () => (
11  <TypeWriter options={options} />
12);

Changelog

1.1.0

• Added deleteSpeed option
• Improved server-side rendering
• Added TypeScript support
• 🔄 Improved loop behavior with proper word completion
• ⚡ Optimized animation performance using useRef
• 🛠️ Fixed last word deletion when loop is false
• 🔧 Better Next.js integration with proper 'use client' directive handling
• 🎯 Improved TypeScript definitions

1.0.3

• Initial public release
• Basic typewriter functionality
• Customizable speeds and pauses

Development

If you'd like to contribute or modify the package locally:

1. Clone the repository:

   1git clone https://github.com/vito8916/react-simple-typewriter.git

2. Install dependencies:

   1npm install

3. Build the package:

   1npm run build

4. Link the package locally for testing:

   1npm link

5. Test the package in a local project:

   1npm link react-simple-typewriter-vb

License

This project is licensed under the MIT License.

---

Made with ❤️ by Victor Alvarado (https://github.com/vito8916).