{"_id":"@bishal-shrestha/react-typewriter","name":"@bishal-shrestha/react-typewriter","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@bishal-shrestha/react-typewriter","version":"1.0.0","description":"A flexible and scalable React component for typing effect with multi-line support","author":{"name":"Bishal Shrestha","url":"https://github.com/shrestha-bishal"},"bugs":{"url":"https://github.com/shrestha-bishal/react-typewriter/issues"},"license":"MIT","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"build":"rollup -c","prepare":"npm run build","test":"echo \"Error: no test specified\" && exit 1"},"homepage":"https://react-typewriter-docs.netlify.app","repository":{"type":"git","url":"git+https://github.com/shrestha-bishal/react-typewriter.git"},"funding":[{"type":"github","url":"https://github.com/sponsors/shrestha-bishal"},{"type":"buy-me-a-coffee","url":"https://www.buymeacoffee.com/shresthabishal"},{"type":"other","url":"https://thanks.dev/gh/shrestha-bishal"}],"sideEffects":false,"publishConfig":{"access":"public"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"devDependencies":{"@types/react":"^19.1.8","@types/react-dom":"^19.1.6","rollup":"^3.0.0","rollup-plugin-typescript2":"^0.31.2","typescript":"^5.0.0"},"keywords":["react","react-component","react-typewriter","typewriter","typewriter-effect","react-typing","typing-effect","typing-animation","animated-text","text-animation","react-animated-text","react-text-effects","react-text-animation","react-ui","react-ui-components","text-effects","react-fx","react-looping-text","typewriter-react","react-typist","text-typing","animated-typewriter","auto-typing","react-auto-typing","text-animation-react","react-type-effect","react-text-display","typewriter-component","looping-text","react-typing-component"],"_id":"@bishal-shrestha/react-typewriter@1.0.0","gitHead":"47209ffd7e2a5c858cedb896ed3a92872468f723","_nodeVersion":"22.16.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-MCBBahhspPHf1ElFq7Qyz/CNAgfhOzsHx7kRe/eJg792v9UAiHGvfoCpOfkr09EBmiUD/1Wle4nNgZcEHaWS2w==","shasum":"c3e06a551386ffc3b7c19c7662f033f4c8998e7e","tarball":"https://registry.npmjs.org/@bishal-shrestha/react-typewriter/-/react-typewriter-1.0.0.tgz","fileCount":8,"unpackedSize":21819,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDlBptb0i5tWkMdEW+U3CCVSHqj0QrpPctLpC7sBD/JpgIgKSjP8dGM7rhANfZ/7Yi4t/G3UYj42mFf+bTgWEJg2po="}]},"_npmUser":{"name":"bishal-shrestha","email":"bishal.shrestha@outlook.com.au","actor":{"name":"bishal-shrestha","email":"bishal.shrestha@outlook.com.au","type":"user"}},"directories":{},"maintainers":[{"name":"bishal-shrestha","email":"bishal.shrestha@outlook.com.au"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-typewriter_1.0.0_1751878496396_0.48132288571471493"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-07T08:54:56.332Z","1.0.0":"2025-07-07T08:54:56.588Z","modified":"2025-07-07T08:54:56.795Z"},"maintainers":[{"name":"bishal-shrestha","email":"bishal.shrestha@outlook.com.au"}],"description":"A flexible and scalable React component for typing effect with multi-line support","homepage":"https://react-typewriter-docs.netlify.app","keywords":["react","react-component","react-typewriter","typewriter","typewriter-effect","react-typing","typing-effect","typing-animation","animated-text","text-animation","react-animated-text","react-text-effects","react-text-animation","react-ui","react-ui-components","text-effects","react-fx","react-looping-text","typewriter-react","react-typist","text-typing","animated-typewriter","auto-typing","react-auto-typing","text-animation-react","react-type-effect","react-text-display","typewriter-component","looping-text","react-typing-component"],"repository":{"type":"git","url":"git+https://github.com/shrestha-bishal/react-typewriter.git"},"author":{"name":"Bishal Shrestha","url":"https://github.com/shrestha-bishal"},"bugs":{"url":"https://github.com/shrestha-bishal/react-typewriter/issues"},"license":"MIT","readme":"# React Typewriter <img src=\"https://github.com/user-attachments/assets/bffc5afa-7adb-4aa4-91b8-3dd427595760\" height=\"40px\" style=\"height: 40px;\">\r\n\r\nA customisable and lightweight React component that simulates a typewriter effect for a list of text lines. Supports typing, line-by-line animation, erasing, looping, and cursor styling.\r\n\r\n[View Package in npm](https://www.npmjs.com/package/@bishal-shrestha/react-typewriter)\r\n\r\n[View Website](https://react-typewriter-docs.netlify.app/)\r\n\r\n## Features\r\n- Typewriter animation per character\r\n- Multi-line support\r\n- Optional erase and loop functionality\r\n- Customizable speeds and delays\r\n- Optional cursor and cursor customization\r\n- Callbacks for line typed and loop completion\r\n- Pause and resume control\r\n\r\n## Installation\r\n```bash\r\nnpm install @bishal-shrestha/react-typewriter\r\n# or\r\nyarn add @bishal-shrestha/react-typewriter\r\n```\r\n\r\n## Usage\r\n```tsx\r\nimport ReactTypewriter from '@bishal-shrestha/react-typewriter';\r\n\r\nfunction App() {\r\n  return (\r\n    <ReactTypewriter\r\n      lines={['Hello, world!', 'This is a typewriter effect.']}\r\n      typingSpeed={50}\r\n      lineDelay={500}\r\n      eraseSpeed={30}\r\n      eraseDelay={1000}\r\n      loop={true}\r\n      showCursor={true}\r\n      cursor=\"|\"\r\n    />\r\n  );\r\n}\r\n\r\nApp()\r\n```\r\n## Props\r\n| Prop             | Type                            | Default     | Description                                                                 |\r\n|------------------|----------------------------------|-------------|-----------------------------------------------------------------------------|\r\n| `lines`          | `string[]`                       | **Required**| Array of strings to type line-by-line                                       |\r\n| `typingSpeed`    | `number`                         | `50`        | Typing speed in milliseconds per character                                  |\r\n| `lineDelay`      | `number`                         | `500`       | Delay before moving to the next line (in ms)                                |\r\n| `eraseSpeed`     | `number`                         | `30`        | Erasing speed in milliseconds per character                                 |\r\n| `eraseDelay`     | `number`                         | `1000`      | Delay before starting to erase (in ms)                                      |\r\n| `loop`           | `boolean`                        | `true`      | Whether to erase and restart after finishing all lines                      |\r\n| `showCursor`     | `boolean`                        | `true`      | Whether to display the blinking cursor                                      |\r\n| `cursor`         | `string &#124; React.ReactNode` | `\"&#124;\"` | The cursor character or a custom React node |\r\n| `className`      | `string`                         | `undefined` | Optional CSS class for the container                                        |\r\n| `style`          | `React.CSSProperties`            | `undefined` | Optional inline styles for the container                                    |\r\n| `pause`          | `boolean`                        | `false`     | Temporarily pauses typing or erasing                                        |\r\n| `onLineTyped`    | `(lineIndex: number) => void`    | `undefined` | Callback fired when a line is completely typed                              |\r\n| `onLoopComplete` | `() => void`                     | `undefined` | Callback fired after a full cycle when `loop` is enabled                    |\r\n\r\n## Demo\r\n[Demo Website](https://react-typewriter-docs.netlify.app/) https://react-typewriter-docs.netlify.app/\r\n![1](https://github.com/user-attachments/assets/8193f092-e0ff-41df-b941-dc8cc45f91ac)\r\n![2](https://github.com/user-attachments/assets/4bb3ce8a-ba7c-4ef4-86c7-dc11b9d6e1dd)\r\n![3](https://github.com/user-attachments/assets/cbf209ae-8cc6-45db-8de2-dec509d9c341)\r\n\r\n#### Minimal Example with Styles\r\n```tsx\r\n<ReactTypewriter\r\n  lines={['Fast. Lightweight. React Typewriter.']}\r\n  typingSpeed={60}\r\n  className=\"my-typewriter\"\r\n/>\r\n\r\n<style>\r\n.my-typewriter {\r\n  font-family: monospace;\r\n  font-size: 1.25rem;\r\n  color: #00ff99;\r\n}\r\n</style>\r\n```\r\n\r\n#### How to Pause/Resume\r\n```tsx\r\nconst [paused, setPaused] = useState(false);\r\n\r\n<ReactTypewriter\r\n  lines={['Typing will pause... and resume!']}\r\n  pause={paused}\r\n/>\r\n<button onClick={() => setPaused(p => !p)}>\r\n  {paused ? 'Resume' : 'Pause'}\r\n</button>\r\n```\r\n\r\n## Funding & Sponsorship\r\n`@bishal-shrestha/react-typewriter` is an open-source project maintained with care, if you like to support the project please support me through the following:\r\n\r\n[![GitHub Sponsors](https://img.shields.io/badge/GitHub%20Sponsors-Become%20a%20Sponsor-blueviolet?logo=githubsponsors&style=flat-square)](https://github.com/sponsors/shrestha-bishal)\r\n[![Buy Me a Coffee](https://img.shields.io/badge/Buy%20Me%20a%20Coffee-Support%20Developer-yellow?logo=buymeacoffee&style=flat-square)](https://www.buymeacoffee.com/shresthabishal)\r\n[![Thanks.dev](https://img.shields.io/badge/Thanks.dev-Appreciate%20Open%20Source-29abe0?logo=github&style=flat-square)](https://thanks.dev/gh/shrestha-bishal)\r\n\r\n## License\r\n\r\nThis project is licensed under the [MIT License](./LICENSE).\r\n\r\n## Author\r\nBishal Shrestha \r\n[![GitHub](https://img.shields.io/badge/GitHub-Profile-black?logo=github)](https://github.com/shrestha-bishal)\r\n\r\n[![Repo](https://img.shields.io/badge/Repository-GitHub-black?logo=github)](https://github.com/shrestha-bishal/react-typewriter)\r\n\r\n[Website](https://react-typewriter-docs.netlify.app)\r\n\r\n© 2025 Bishal Shrestha, All rights reserved\r\n","readmeFilename":"README.md","_rev":"1-3deb34130cfcf0a1207114f22864c3e9"}