# React text Typing

<h2 align="center"><img src="https://raw.githubusercontent.com/Oda2/react-text-typing/refs/heads/main/assets/logo.png" alt=""></h2>

<p align="center">A lightweight React component that creates a realistic typewriter animation effect with cursor blinking.</p>

<p align="center"><a href="https://www.npmjs.com/package/react-text-typing"><img src="https://img.shields.io/npm/v/react-text-typing?style=flat&#x26;color=0075D7" alt="npm version"> </a><a href="https://github.com/Oda2/react-text-typing/actions"><img src="https://github.com/Oda2/react-text-typing/actions/workflows/ci.yml/badge.svg" alt="CI"> </a><a href="https://coveralls.io/github/Oda2/react-text-typing"><img src="https://coveralls.io/repos/github/Oda2/react-text-typing/badge.svg?branch=main" alt="Coverage"> </a><a href="https://bundlephobia.com/package/react-text-typing"><img src="https://img.shields.io/bundlephobia/minzip/react-text-typing?color=0075D7" alt="Bundle Size"> </a><a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/license-MIT-0075D7.svg" alt="License"></a></p>

***

### ✨ 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

```bash
npm install react-text-typing
```

or

```bash
yarn add react-text-typing
```

### 🚀 Quick Start

```tsx
import TextTyping from 'react-text-typing';
import 'react-text-typing/css';

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

### 💻 Usage

#### Basic

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

#### Custom Speed

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

#### Custom Colors

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

#### Disable Cursor Blink

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

#### Custom Font Size

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

#### With Callback

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

#### Custom Component

```tsx
<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:**

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

2. **Add your own styles:**

```css
.text-typing {
  font-family: 'Fira Code', monospace;
}
```

3. **Import only CSS and customize:**

```js
import 'react-text-typing/css';
```

### 🛠️ Development

```bash
# 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](https://github.com/Oda2/react-text-typing/issues) with a detailed description.

### 📝 License

MIT License - see the LICENSE file for details.

***

<p align="center">Made with ❤️ by <a href="https://github.com/Oda2">Renato Oda</a></p>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://renato-oda2.gitbook.io/react-text-typing/master.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.