{"id":27926001,"url":"https://github.com/westttttttt/react-typewriter","last_synced_at":"2026-04-18T15:37:47.874Z","repository":{"id":291351817,"uuid":"977373868","full_name":"Westttttttt/react-typewriter","owner":"Westttttttt","description":"A simple and customizable React typewriter effect component with TypeScript support 🚀","archived":false,"fork":false,"pushed_at":"2025-05-06T03:04:11.000Z","size":16403,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-06T04:19:06.133Z","etag":null,"topics":["animation","npm-package","react","react-component","typescript","typewriter"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Westttttttt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-04T03:54:26.000Z","updated_at":"2025-05-06T03:04:14.000Z","dependencies_parsed_at":"2025-05-06T04:19:07.781Z","dependency_job_id":null,"html_url":"https://github.com/Westttttttt/react-typewriter","commit_stats":null,"previous_names":["westttttttt/react-typewriter-effect","westttttttt/react-typewriter"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Westttttttt%2Freact-typewriter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Westttttttt%2Freact-typewriter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Westttttttt%2Freact-typewriter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Westttttttt%2Freact-typewriter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Westttttttt","download_url":"https://codeload.github.com/Westttttttt/react-typewriter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252793562,"owners_count":21805053,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","npm-package","react","react-component","typescript","typewriter"],"created_at":"2025-05-07T00:44:43.834Z","updated_at":"2026-04-18T15:37:45.225Z","avatar_url":"https://github.com/Westttttttt.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Typewriter Effect\n\n[![npm version](https://img.shields.io/npm/v/@westttttttt/react-typewriter.svg?style=flat)](https://www.npmjs.com/package/@westttttttt/react-typewriter)\n[![npm downloads](https://img.shields.io/npm/dm/@westttttttt/react-typewriter.svg?style=flat)](https://www.npmjs.com/package/@westttttttt/react-typewriter)\n\nA simple and customizable React typewriter effect component with TypeScript support.\n\n![NPM Version](https://img.shields.io/npm/v/@westttttttt/react-typewriter)\n![License](https://img.shields.io/npm/l/@westttttttt/react-typewriter)\n![Bundle Size](https://img.shields.io/bundlephobia/min/@westttttttt/react-typewriter)\n\n## Features\n\n- 🚀 Easy to use\n- 📦 Lightweight\n- 🎯 TypeScript support\n- ⚡ Zero dependencies\n- 🎨 Customizable speed and delay\n- 🔧 Callback support\n\n## Installation\n\n```bash\nnpm install @westttttttt/react-typewriter\n```\n\nOr with yarn:\n\n```bash\nyarn add @westttttttt/react-typewriter\n```\n\n## Usage\n\n```tsx\nimport { TypewriterEffect } from '@westttttttt/react-typewriter';\n\nfunction App() {\n  return (\n    \u003cTypewriterEffect\n      text=\"Hello, this is a typewriter effect!\"\n      speed={100}\n      delay={1000}\n      onComplete={() =\u003e console.log('Typing completed!')}\n    /\u003e\n  );\n}\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| text | string | required | The text to be displayed with typewriter effect |\n| speed | number | 100 | Typing speed in milliseconds |\n| delay | number | 0 | Initial delay before typing starts |\n| onComplete | function | undefined | Callback function when typing is complete |\n| className | string | undefined | CSS class name for styling |\n\n## Examples\n\n### Basic Usage\n```tsx\n\u003cTypewriterEffect text=\"Hello World!\" /\u003e\n```\n\n### With Custom Speed and Delay\n```tsx\n\u003cTypewriterEffect\n  text=\"This will type slower and start after 2 seconds\"\n  speed={200}\n  delay={2000}\n/\u003e\n```\n\n### With Completion Callback\n```tsx\n\u003cTypewriterEffect\n  text=\"Notification when done typing\"\n  onComplete={() =\u003e alert('Typing finished!')}\n/\u003e\n```\n\n### With Custom Styling\n```tsx\n\u003cTypewriterEffect\n  text=\"Styled text\"\n  className=\"custom-typewriter\"\n/\u003e\n```\n\nCSS:\n```css\n.custom-typewriter {\n  font-size: 24px;\n  color: #007bff;\n  font-family: 'Courier New', monospace;\n}\n```\n\n## Demo\n\n```tsx\nimport React from 'react';\nimport { TypewriterEffect } from '@westttttttt/react-typewriter';\n\nconst Demo = () =\u003e {\n  return (\n    \u003cdiv style={{ padding: '20px' }}\u003e\n      \u003cTypewriterEffect\n        text=\"Welcome to my React Typewriter Effect demo!\"\n        speed={100}\n        delay={500}\n        className=\"demo-typewriter\"\n      /\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default Demo;\n```\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'feat: Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n## License\n\nMIT © [Westttttttt](https://github.com/Westttttttt)\n\n## Author\n\n- [Westttttttt](https://github.com/Westttttttt)\n- Created: 2025-05-04\n- Version: 1.0.0\n\n## Support\n\nIf you have any questions or need help, please open an issue on [GitHub](https://github.com/Westttttttt/react-typewriter-effect/issues).\n\n## Changelog\n## Changelog\n\n### 1.0.2 (2025-05-04)\n- Fix: Correct typewriter effect character rendering issue\n\n### 1.0.2 (2025-05-04)\n- Fix: Correct typewriter effect character rendering\n- Fix: Resolve timing issues with text display\n\n### 1.0.1 (2025-05-04)\n- Initial release\n\n### 1.0.0 (2025-05-04)\n- Initial release\n- Basic typewriter effect implementation\n- TypeScript support\n- Customizable speed and delay\n- Completion callback\n- Custom styling support\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwestttttttt%2Freact-typewriter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwestttttttt%2Freact-typewriter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwestttttttt%2Freact-typewriter/lists"}