react-text-typing

A lightweight React component that creates a realistic typewriter animation effect with cursor blinking.

---

✨ Features

• 🎯 Lightweight - Zero dependencies, tiny bundle (~11kb gzipped)
• ⚡ Performant - Built with React hooks, optimized for speed
• 🎨 Customizable - Colors, speed, font size, cursor blink
• ♿ Accessible - Semantic HTML, works with screen readers
• 📦 Tree-shakeable - Import only what you need
• 🔧 TypeScript - Full TypeScript support included
• 🧪 Well tested - 100% test coverage

📦 Installation

npm install react-text-typing

or

yarn add react-text-typing

🚀 Quick Start

import TextTyping from "react-text-typing";
import "react-text-typing/css";

function App() {
  return <TextTyping text="Hello, World!" />;
}

💻 Usage

Basic

<TextTyping text="Welcome to my website" />

Custom Speed

<TextTyping text="Fast typing" speed={50} />

Custom Colors

<TextTyping text="Custom colors" colorText="#ff6b6b" colorTyping="#4ecdc4" />

Disable Cursor Blink

<TextTyping text="No blink" showBlink={false} />

Custom Font Size

<TextTyping text="Big text" fontSize="3em" />

With Callback

<TextTyping text="Callback example" onComplete={() => console.log("Done!")} />

Custom Component

<TextTyping text="Heading" component="h1" className="my-heading" />

📚 API Reference

Prop	Type	Default	Description
text	string	Required	Text to type out
speed	number	500	Milliseconds between each character
colorText	string	#fff	Color of the typed text
colorTyping	string	#0075D7	Color of the typing effect
showBlink	boolean	true	Show/hide cursor blink
fontSize	string	5em	Font size of the text
timeTyping	number	10	Duration of typing animation (seconds)
component	string | Component	"span"	HTML element or custom component
onComplete	() => void	-	Callback when typing finishes
className	string	-	Additional CSS class

🎨 Styling

The component includes default CSS. To customize, you can:

1. Override CSS variables:

<TextTyping text="Custom" colorText="#ff0000" colorTyping="#00ff00" />

2. Add your own styles:

.text-typing {
  font-family: "Fira Code", monospace;
}

3. Import only CSS and customize:

import "react-text-typing/css";

🛠️ Development

# Install dependencies
npm install

# Run tests
npm test

# Run tests with coverage
npm run coverage

# Run Storybook
npm run dev

# Build library
npm run build:lib

# Lint
npm run lint

🤝 Contributing

Contributions are welcome! Please read our contributing guidelines first.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'feat: add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📖 Storybook

We use Storybook for component development and documentation. Run npm run dev to explore the component in an interactive environment.

🐛 Issues

Found a bug? Please open an issue with a detailed description.

📝 License

MIT License - see the LICENSE file for details.

---

Made with ❤️ by Renato Oda