{"id":36818048,"url":"https://github.com/maxeth/react-type-animation","last_synced_at":"2026-01-12T13:55:53.550Z","repository":{"id":43100847,"uuid":"357981577","full_name":"maxeth/react-type-animation","owner":"maxeth","description":"A React typewriter animation based on typical with extended functionality and customization. ","archived":false,"fork":false,"pushed_at":"2024-07-12T15:29:14.000Z","size":1715,"stargazers_count":472,"open_issues_count":16,"forks_count":24,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-22T02:28:42.457Z","etag":null,"topics":["css","react","react-component","reactjs","typewriter","typewriter-animation","typewriter-effect","typical","typing-animation"],"latest_commit_sha":null,"homepage":"https://react-type-animation.netlify.app/","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/maxeth.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":"2021-04-14T17:04:29.000Z","updated_at":"2025-09-21T13:03:04.000Z","dependencies_parsed_at":"2023-02-08T20:15:18.431Z","dependency_job_id":"ffd62e9b-abd6-452d-93d7-44d2a822032b","html_url":"https://github.com/maxeth/react-type-animation","commit_stats":{"total_commits":60,"total_committers":5,"mean_commits":12.0,"dds":0.4,"last_synced_commit":"3decbf61cd7710330c325a278f1bb35b82d74a61"},"previous_names":["kozie1337/react-type-animation"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/maxeth/react-type-animation","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxeth%2Freact-type-animation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxeth%2Freact-type-animation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxeth%2Freact-type-animation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxeth%2Freact-type-animation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maxeth","download_url":"https://codeload.github.com/maxeth/react-type-animation/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxeth%2Freact-type-animation/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28339990,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-12T12:22:26.515Z","status":"ssl_error","status_checked_at":"2026-01-12T12:22:10.856Z","response_time":98,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["css","react","react-component","reactjs","typewriter","typewriter-animation","typewriter-effect","typical","typing-animation"],"created_at":"2026-01-12T13:55:53.031Z","updated_at":"2026-01-12T13:55:53.533Z","avatar_url":"https://github.com/maxeth.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-type-animation\n\n[![npm version](https://badge.fury.io/js/react-type-animation.svg)][npm_url]\n[![downloads](https://img.shields.io/npm/dt/react-type-animation.svg)][npm_url]\n[![license](https://img.shields.io/npm/l/react-type-animation.svg)][npm_url]\n\nA customizable React typing animation component.\n\n[npm_url]: https://www.npmjs.org/package/react-type-animation\n\n## Installation\n\n```bash\nnpm install react-type-animation\n```\n\nor\n\n```bash\nyarn add react-type-animation\n```\n\nRequires a `react` and `react-dom` version of at least `15.0.0`.\n\n## Live Demo\n\nA live demo and usage examples of the animation can be found at [https://react-type-animation.netlify.app/examples](https://react-type-animation.netlify.app/examples).\n\n## Usage\n\nA common typewriter animation for a landing page could look like this:\n\n```jsx\nimport { TypeAnimation } from 'react-type-animation';\n\nconst ExampleComponent = () =\u003e {\n  return (\n    \u003cTypeAnimation\n      sequence={[\n        // Same substring at the start will only be typed out once, initially\n        'We produce food for Mice',\n        1000, // wait 1s before replacing \"Mice\" with \"Hamsters\"\n        'We produce food for Hamsters',\n        1000,\n        'We produce food for Guinea Pigs',\n        1000,\n        'We produce food for Chinchillas',\n        1000,\n      ]}\n      wrapper=\"span\"\n      speed={50}\n      style={{ fontSize: '2em', display: 'inline-block' }}\n      repeat={Infinity}\n    /\u003e\n  );\n};\n```\n\n## Documentation\n\nThe docs with props, options and common problem solutions can be found at: [https://react-type-animation.netlify.app/](https://react-type-animation.netlify.app/).\n\n## Migrating to v3\n\nThe default wrapper is now `\u003cspan\u003e` instead of `\u003cdiv\u003e`: **To migrate**, add a `display: inline-block/block` or `wrapper=\"div\"` to all `\u003cTypeAnimation/\u003e` occurances with unspecified wrapper.\n\n## Usage Notes\n\n### Immutability\n\nDue to the nature of the animation, this component is **permanently memoized**, which means that the component **never** re-renders unless you hard-reload the page, and hence **props changes will not be reflected**.\n\n### Hot Reload NOT Supported\n\nBecause the TypeAnimation component is memoized and **never** re-rendered (see above), yet Hot Reload attempts to re-render the component, **changes to the TypeAnimation component will not render until you hard-reload the page**.\n\nHence, whenever you make changes to the TypeAnimation component, you unfortunately have to reload your page.\n\n## Props\n\nSee [https://react-type-animation.netlify.app/options](https://react-type-animation.netlify.app/options) for more details.\n\n| Prop                    | Required | Type                                                                 | Example                                               | Description                                                                                                                  | Default            |\n| ----------------------- | -------- | -------------------------------------------------------------------- | ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | ------------------ |\n| `sequence`              | yes      | Array\u003cnumber \u0026#124; string \u0026#124; (() =\u003e void \u0026#124; Promise\u003cvoid\u003e)\u003e | `['One', 1000, 'Two', () =\u003e console.log(\"done\")]`     | Animation sequence: [TEXT, DELAY-MS, CALLBACK]                                                                               | `-`                |\n| `wrapper`               | no       | string                                                               | `p`,`h2`,`div`, `strong`                              | HTML element tag that wraps the typing animation                                                                             | `span`             |\n| `speed`                 | no       | 1,2,..,99 \u0026#124; {type: \"keyStrokeDelayInMs\", value: number}         | `45`, `{type: \"keyStrokeDelayInMs\", value: 100}`      | Speed for the writing of the animation                                                                                       | `40`               |\n| `deletionSpeed`         | no       | 1,2,..,99 \u0026#124; {type: \"keyStrokeDelayInMs\", value: number}         | `45`, `{type: \"keyStrokeDelayInMs\", value: 100}`      | Speed for deleting of the animation                                                                                          | `speed`            |\n| `omitDeletionAnimation` | no       | boolean                                                              | `false`, `true`                                       | If true, deletions will be instant and without animation                                                                     | `false`            |\n| `repeat`                | no       | number                                                               | `0`, `3`, `Infinity`                                  | Amount of animation repetitions                                                                                              | `0`                |\n| `cursor`                | no       | boolean                                                              | `false`, `true`                                       | Display default blinking cursor css-animation                                                                                | `true`             |\n| `preRenderFirstString`  | no       | boolean                                                              | `false`, `true`                                       | If true, the first string of your sequence will not be animated and initially (pre-)rendered                                 | `true`             |\n| `className`             | no       | string                                                               | `custom-class-name`                                   | HTML class name applied to the wrapper to style the text                                                                     | `-`                |\n| `style`                 | no       | object                                                               | `{fontSize: '2em'}`                                   | JSX inline style object                                                                                                      | `-`                |\n| `ref`                   | no       | HTMLElement \u0026#124; null                                              | `-`                                                   | `-`                                                                                                                          | `-`                |\n| `splitter`              | no       | (text: string) =\u003e Array\u003cstring\u003e                                      | `(str) =\u003e new GraphemeSplitter().splitGraphemes(str)` | Used for splitting complex characters, see [grapheme-splitter](https://github.com/orling/grapheme-splitter) for more details | `String.split('')` |\n\n---\n\n \u003cbr\u003e\n \u003cbr\u003e\n \u003cbr\u003e\n\n[npm](https://www.npmjs.com/package/react-type-animation) / [github](https://github.com/maxeth/react-type-animation/)\nCredits: [typical](https://github.com/camwiegert/typical)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxeth%2Freact-type-animation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaxeth%2Freact-type-animation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxeth%2Freact-type-animation/lists"}