https://github.com/oda2/react-text-typing
Component that performs the effect of writing
https://github.com/oda2/react-text-typing
effects hacktoberfest library react text
Last synced: 4 months ago
JSON representation
Component that performs the effect of writing
- Host: GitHub
- URL: https://github.com/oda2/react-text-typing
- Owner: Oda2
- License: mit
- Created: 2020-01-31T17:29:56.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2024-11-22T11:49:50.000Z (over 1 year ago)
- Last Synced: 2024-11-22T12:34:27.599Z (over 1 year ago)
- Topics: effects, hacktoberfest, library, react, text
- Language: TypeScript
- Homepage: https://oda2.github.io/react-text-typing/
- Size: 2.57 MB
- Stars: 9
- Watchers: 3
- Forks: 3
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: code_of_conduct.md
- Security: SECURITY.md
Awesome Lists containing this project
README
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
```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 ;
}
```
## 💻 Usage
### Basic
```tsx
```
### Custom Speed
```tsx
```
### Custom Colors
```tsx
```
### Disable Cursor Blink
```tsx
```
### Custom Font Size
```tsx
```
### With Callback
```tsx
console.log('Done!')} />
```
### Custom Component
```tsx
```
## 📚 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
```
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](CONTRIBUTING.md) 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](LICENSE) file for details.
---
Made with ❤️ by Renato Oda