https://github.com/westttttttt/react-typewriter
A simple and customizable React typewriter effect component with TypeScript support 🚀
https://github.com/westttttttt/react-typewriter
animation npm-package react react-component typescript typewriter
Last synced: about 2 months ago
JSON representation
A simple and customizable React typewriter effect component with TypeScript support 🚀
- Host: GitHub
- URL: https://github.com/westttttttt/react-typewriter
- Owner: Westttttttt
- Created: 2025-05-04T03:54:26.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-06T03:04:11.000Z (about 1 year ago)
- Last Synced: 2025-05-06T04:19:06.133Z (about 1 year ago)
- Topics: animation, npm-package, react, react-component, typescript, typewriter
- Language: TypeScript
- Homepage:
- Size: 15.6 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Typewriter Effect
[](https://www.npmjs.com/package/@westttttttt/react-typewriter)
[](https://www.npmjs.com/package/@westttttttt/react-typewriter)
A simple and customizable React typewriter effect component with TypeScript support.
## Features
- 🚀 Easy to use
- 📦 Lightweight
- 🎯 TypeScript support
- âš¡ Zero dependencies
- 🎨 Customizable speed and delay
- 🔧 Callback support
## Installation
```bash
npm install @westttttttt/react-typewriter
```
Or with yarn:
```bash
yarn add @westttttttt/react-typewriter
```
## Usage
```tsx
import { TypewriterEffect } from '@westttttttt/react-typewriter';
function App() {
return (
console.log('Typing completed!')}
/>
);
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| text | string | required | The text to be displayed with typewriter effect |
| speed | number | 100 | Typing speed in milliseconds |
| delay | number | 0 | Initial delay before typing starts |
| onComplete | function | undefined | Callback function when typing is complete |
| className | string | undefined | CSS class name for styling |
## Examples
### Basic Usage
```tsx
```
### With Custom Speed and Delay
```tsx
```
### With Completion Callback
```tsx
alert('Typing finished!')}
/>
```
### With Custom Styling
```tsx
```
CSS:
```css
.custom-typewriter {
font-size: 24px;
color: #007bff;
font-family: 'Courier New', monospace;
}
```
## Demo
```tsx
import React from 'react';
import { TypewriterEffect } from '@westttttttt/react-typewriter';
const Demo = () => {
return (
);
};
export default Demo;
```
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'feat: Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## License
MIT © [Westttttttt](https://github.com/Westttttttt)
## Author
- [Westttttttt](https://github.com/Westttttttt)
- Created: 2025-05-04
- Version: 1.0.0
## Support
If you have any questions or need help, please open an issue on [GitHub](https://github.com/Westttttttt/react-typewriter-effect/issues).
## Changelog
## Changelog
### 1.0.2 (2025-05-04)
- Fix: Correct typewriter effect character rendering issue
### 1.0.2 (2025-05-04)
- Fix: Correct typewriter effect character rendering
- Fix: Resolve timing issues with text display
### 1.0.1 (2025-05-04)
- Initial release
### 1.0.0 (2025-05-04)
- Initial release
- Basic typewriter effect implementation
- TypeScript support
- Customizable speed and delay
- Completion callback
- Custom styling support