{"id":30046700,"url":"https://github.com/pvvng/react-typing-text","last_synced_at":"2026-01-20T17:34:13.991Z","repository":{"id":305613753,"uuid":"1023394969","full_name":"pvvng/react-typing-text","owner":"pvvng","description":"React component for typing animation with full control – pause, resume, loop, custom cursor, and more.","archived":false,"fork":false,"pushed_at":"2025-07-28T04:41:00.000Z","size":1578,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-28T06:14:47.119Z","etag":null,"topics":["animation","npm-package","react","text","typescript","typewriter-effect","typing","ui"],"latest_commit_sha":null,"homepage":"https://pvvng.github.io/react-typing-text","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pvvng.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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-07-21T05:26:58.000Z","updated_at":"2025-07-28T04:40:35.000Z","dependencies_parsed_at":"2025-07-21T05:56:21.623Z","dependency_job_id":"98c8b3a4-6db7-4ce3-8683-7f9f8ee2c2d2","html_url":"https://github.com/pvvng/react-typing-text","commit_stats":null,"previous_names":["pvvng/react-typing-text"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/pvvng/react-typing-text","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pvvng%2Freact-typing-text","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pvvng%2Freact-typing-text/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pvvng%2Freact-typing-text/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pvvng%2Freact-typing-text/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pvvng","download_url":"https://codeload.github.com/pvvng/react-typing-text/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pvvng%2Freact-typing-text/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269227870,"owners_count":24381837,"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","status":"online","status_checked_at":"2025-08-07T02:00:09.698Z","response_time":73,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","text","typescript","typewriter-effect","typing","ui"],"created_at":"2025-08-07T08:53:23.483Z","updated_at":"2026-01-20T17:34:13.986Z","avatar_url":"https://github.com/pvvng.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Typing Text\n\nReact component for typing animation with full control – pause, resume, loop, custom cursor, and more.\n\n[![npm version](https://img.shields.io/npm/v/@pvvng/react-typing-text?color=%2300b894\u0026label=npm)](https://www.npmjs.com/package/@pvvng/react-typing-text)\n[![Storybook](https://img.shields.io/badge/storybook-online-purple?logo=storybook)](https://pvvng.github.io/react-typing-text)\n\n## Install\n\n```bash\nnpm install @pvvng/react-typing-text\n```\n\n## Storybook\n\nTry it live on Storybook -\u003e [Link](https://pvvng.github.io/react-typing-text/?path=/docs/examples-typingtextexample--docs)\n\n## Simple Example\n\n```tsx\nimport { useRef } from \"react\";\nimport { TypingText, TypingTextHandle } from \"@pvvng/react-typing-text\";\n\nexport default function Example() {\n  const typingRef = useRef\u003cTypingTextHandle\u003e(null);\n\n  return (\n    \u003c\u003e\n      \u003cTypingText\n        ref={typingRef}\n        text=\"Hello, world!\"\n        interval={100}\n        loop\n        startDelay={500}\n        onTypingStart={() =\u003e console.log(\"Typing started\")}\n        onType={(char, idx) =\u003e console.log(`Typed ${char} at ${idx}`)}\n        onTypingEnd={() =\u003e console.log(\"Typing ended\")}\n      /\u003e\n\n      \u003cbutton onClick={() =\u003e typingRef.current?.pause()}\u003ePause\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e typingRef.current?.resume()}\u003eResume\u003c/button\u003e\n      \u003cbutton onClick={() =\u003e typingRef.current?.reset()}\u003eReset\u003c/button\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n## Typing Text Options\n\n\u003e Props marked with `*` are **required**.\n\n| Prop            | Type                                    | Default | Description                                                                                                                                                            |\n| --------------- | --------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `text*`         | `string`                                | —       | The text string to animate with typing effect.                                                                                                                         |\n| `autoScroll`    | `boolean`                               | `true`  | Whether to automatically scroll to the end as typing progresses.                                                                                                       |\n| `startDelay`    | `number`                                | `0`     | Delay in milliseconds before typing starts. Applied every time the `text` prop changes, including initial mount.                                                       |\n| `interval`      | `number`                                | `60`    | Interval in milliseconds between typing each character.                                                                                                                |\n| `loop`          | `boolean`                               | `false` | Whether to loop the typing animation continuously.                                                                                                                     |\n| `loopDelay`     | `number`                                | `1000`  | Delay in milliseconds before restarting the looped typing animation.                                                                                                   |\n| `className`     | `string`                                | —       | CSS class name applied to the container element.                                                                                                                       |\n| `style`         | `React.CSSProperties`                   | —       | Inline styles applied to the container element.                                                                                                                        |\n| `cursor`        | `React.ReactElement\u003c\"span\"\u003e \\| null`    | —       | Custom cursor element. Must be a `\u003cspan\u003e` (or other inline element) to avoid invalid HTML structure and hydration errors. Set `null` to disable the cursor completely. |\n| `onTypingStart` | `() =\u003e void`                            | —       | Callback fired once when typing starts after `startDelay`.                                                                                                             |\n| `onType`        | `(char: string, index: number) =\u003e void` | —       | Callback fired on each typed character with the character and its index.                                                                                               |\n| `onTypingEnd`   | `() =\u003e void`                            | —       | Callback fired once when typing finishes (or after the last loop iteration).                                                                                           |\n\n### Usage tips:\n\n- startDelay is applied only once when the text prop changes (initial mount or text update), and not on subsequent loops.\n- The onTypingStart and onTypingEnd callbacks are called on every typing start and end cycle, including loops.\n- Use loop and loopDelay to control repeated typing animations.\n- Set cursor={null} to completely disable the cursor display.\n\n## TypingTextHandle Method\n\nAccessible via `ref` using `useRef\u003cTypingTextHandle\u003e()`.\n\n| Method   | Description                                                           |\n| -------- | --------------------------------------------------------------------- |\n| `pause`  | Pauses the typing animation.                                          |\n| `resume` | Resumes the typing animation if paused and not finished.              |\n| `reset`  | Resets the typing animation to the start and resumes typing.          |\n| `skip()` | **Skips** the current typing and immediately renders the full `text`. |\n\n\u003e Use `skip()` to let users instantly reveal all text without waiting for the animation.\n\n### Usage tips:\n\n- Use the ref returned by useRef\u003cTypingTextHandle\u003e() to call these methods imperatively.\n- pause and resume help control flow for advanced UIs (e.g., pausing when a modal opens).\n- reset can be tied to events like changing the text prop or user-triggered replay.\n\n## Default Cursor\n\nIf you do not provide a custom `cursor` prop, the component will render a default blinking cursor as a `\u003cspan\u003e` element with the following styles:\n\n- `display: inline-block`\n- `vertical-align: middle`\n- `width: 2px`\n- `height: 1rem`\n- `background-color: black`\n- `margin-left: 4px`\n- blinking animation\n\nThis default cursor is designed to visually resemble a typical text caret and supports **auto-scrolling** behavior when `autoScroll` is enabled.\n\n\u003e **Important:**\n\u003e\n\u003e In HTML, a `\u003cp\u003e` element **cannot contain** block-level elements like `\u003cdiv\u003e` or nested `\u003cp\u003e`.\n\u003e\n\u003e For example, placing a `\u003cdiv\u003e` inside a `\u003cp\u003e` will cause **hydration errors** such as:  \n\u003e `\"In HTML, \u003cdiv\u003e cannot be a descendant of \u003cp\u003e. This will cause a hydration error. \u003cp\u003e cannot contain a nested \u003cdiv\u003e.\"`\n\u003e\n\u003e To prevent these errors, the `cursor` prop **must be a `\u003cspan\u003e` element** (or other inline elements) because the typing text and cursor are wrapped inside a `\u003cp\u003e`.  \n\u003e Using a `\u003cspan\u003e` ensures valid HTML structure and avoids rendering/hydration issues.\n\nIf you want to disable the cursor completely, set the `cursor` prop to `null`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpvvng%2Freact-typing-text","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpvvng%2Freact-typing-text","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpvvng%2Freact-typing-text/lists"}