{"id":49767635,"url":"https://github.com/doanhtu07/react-typewriter-animate","last_synced_at":"2026-05-11T11:06:40.141Z","repository":{"id":57673860,"uuid":"481481277","full_name":"doanhtu07/react-typewriter-animate","owner":"doanhtu07","description":"A easy-to-use React Typewriter Effect component","archived":false,"fork":false,"pushed_at":"2022-12-21T23:14:39.000Z","size":2140,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-05T20:06:32.830Z","etag":null,"topics":["component","front-end","react","typewriter-effect","ui"],"latest_commit_sha":null,"homepage":"","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/doanhtu07.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}},"created_at":"2022-04-14T05:46:05.000Z","updated_at":"2023-04-12T22:38:27.000Z","dependencies_parsed_at":"2023-01-30T05:01:12.557Z","dependency_job_id":null,"html_url":"https://github.com/doanhtu07/react-typewriter-animate","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/doanhtu07/react-typewriter-animate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doanhtu07%2Freact-typewriter-animate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doanhtu07%2Freact-typewriter-animate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doanhtu07%2Freact-typewriter-animate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doanhtu07%2Freact-typewriter-animate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/doanhtu07","download_url":"https://codeload.github.com/doanhtu07/react-typewriter-animate/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doanhtu07%2Freact-typewriter-animate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32891989,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-10T13:40:02.631Z","status":"online","status_checked_at":"2026-05-11T02:00:05.975Z","response_time":120,"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":["component","front-end","react","typewriter-effect","ui"],"created_at":"2026-05-11T11:06:39.305Z","updated_at":"2026-05-11T11:06:40.135Z","avatar_url":"https://github.com/doanhtu07.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Typewriter Animate\n\n![banner](https://user-images.githubusercontent.com/55064969/163668440-8aead1df-3774-4de6-b208-94c6396b5e46.gif)\n\n## Useful Links\n\n- [NPM Repo](https://www.npmjs.com/package/react-typewriter-animate)\n- [CodeSandbox Demo](https://codesandbox.io/s/test-react-typewriter-animate-zkxyjt)\n\n**Note: Examples are written far below.**\n\n### Table of content\n\n- [Installation](#installation)\n- [Usage in React](#usage-in-react)\n- [Options for Typewriter](#options-for-typewriter)\n- [Options for WordBlock](#options-for-wordblock)\n- [Options for ActionBlock](#options-for-actionblock)\n- [Examples](#examples)\n  - [Basic Example](#basic-example)\n  - [Example with override object in WordBlock](#example-with-override-object-in-wordblock)\n  - [Example with override cursor in WordBlock](#example-with-override-cursor-in-wordblock)\n  - [Example with styled WordBlock](#example-with-styled-wordblock)\n  - [Example with overwrite style object: classes](#example-with-overwrite-style-object-classes)\n  - [Example with delete](#example-with-delete)\n  - [Example with combo: start flag and function](#example-with-combo-start-flag-and-function)\n\n## Installation\n\n`npm install react-typewriter-animate`\n\nor\n\n`yarn add react-typewriter-animate`\n\n## Usage in React\n\n```typescript\n\nimport Typewriter from 'react-typewriter-animate';\nimport \"react-typewriter-animate/dist/Typewriter.css\";\n\n...\n\nclass Demo extends React.Components {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cTypewriter\n          dataToRotate={[\n            [\n              { type: \"word\", text: \"Hello!\" }\n            ],\n            [\n              { type: \"word\", text: \"I'm Anh Tu.\" }\n            ]\n          ]}\n        /\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n\n```\n\n## Options for Typewriter\n\n```typescript\ntype TypewriterProps = {\n  dataToRotate: (WordBlock | ActionBlock)[][]; // Purpose: This is the array of all data (i.e banners) to type out. Each banner is a small array of WordBlock's and ActionBlock's\n\n  cursor?: {\n    char?: string; // Default: \"│\" | Purpose: Set cursor's appearance using string.\n    cursorBlinkRate?: string; // Default: \"900ms\" | Purpose: Set blink speed of cursor.\n    timeBeforeBlinkCursor?: number; // Default: 500ms | Purpose: When finish typing, set timeout before blinking cursor.\n  };\n\n  timeBeforeDelete?: number; // Default: 1000ms | Purpose: Wait time before deleting a banner after finish typing the whole banner.\n  timeBeforeWriteNewRotateData?: number; // Default: 500ms | Purpose: Wait time before typing next banner.\n\n  maxTypeSpeed?: number; // Default: 200ms | Purpose: Maximum typing speed.\n  typeVariance?: number; // Default: 100ms | Purpose: Type speed range = maxTypespeed - typeVariance -\u003e maxTypespeed. Type speed of each character can vary randomly within this range.\n\n  maxDeleteSpeed?: number; // Default: 100ms | Purpose: Maximum deleting speed.\n  deleteVariance?: number; // Default: 50ms | Purpose: Delete speed range = maxDeleteSpeed - deleteVariance -\u003e maxDeleteSpeed. Delete speed of each character can vary randomly within this range.\n\n  start?: boolean; // Default: true | Purpose: Determine whether Typewriter should start typing.\n  loop?: boolean; // Default: false | Purpose: Determine whether Typewriter should loop these banners or stop after the last banner.\n\n  containerClass?: string; // Purpose: Overwrite default styles of Typewriter-container.\n  contentClass?: string; // Purpose: Overwrite default styles of Typewriter-content.\n  cursorClass?: string; // Purpose: Overwrite default styles of Typewriter-cursor.\n};\n```\n\n**Note: You can access the class name keywords safely through TypewriterClassNames exported from the package.**\n\n```typescript\nenum TypewriterClassNames {\n  Container = \"Typewriter-container\",\n  Content = \"Typewriter-content\",\n  Cursor = \"Typewriter-cursor\",\n  Blink = \"Typewriter-blink\",\n  Blink_Keyframe = \"Typewriter-blink-keyframe\",\n}\n```\n\n## Options for WordBlock\n\n```typescript\ntype WordBlock = {\n  type: \"word\";\n  text: string;\n\n  spanClass?: string; // Purpose: Class name for current word block. Typewriter will wrap text inside a \u003cspan\u003e for you.\n\n  // Purpose: Override cursor style and appearance.\n  cursor?: {\n    char?: string; // Default \"│\"\n    cursorClass?: string;\n  };\n\n  // Purpose: Override type speed and delete speed passed from main props.\n  override?: {\n    maxTypespeed?: number;\n    typeVariance?: number;\n\n    maxDeleteSpeed?: number;\n    deleteVariance?: number;\n  };\n};\n```\n\n## Options for ActionBlock\n\n```typescript\ntype DeleteBlock = {\n  type: \"action\";\n  action: \"delete\";\n  amount: number;\n  wait?: number; // Default wait time before delete is 1000ms\n};\n\ntype FunctionBlock = {\n  type: \"action\";\n  action: \"function\";\n  func: () =\u003e void;\n  wait?: number; // Default wait time before doing function is 0ms\n};\n```\n\n## Examples\n\n### Basic Example\n\n```typescript\nimport Typewriter from \"react-typewriter-animate\";\nimport \"react-typewriter-animate/dist/Typewriter.css\";\n\nclass BasicExample extends React.Components {\n  render() {\n    return (\n      \u003cdiv className=\"root\"\u003e\n        \u003cTypewriter\n          dataToRotate={[\n            // Banner 1\n            [{ type: \"word\", text: \"Hello!\" }],\n            // Banner 2\n            [{ type: \"word\", text: \"I'm Anh Tu.\" }],\n          ]}\n        /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n### Example with override object in WordBlock\n\n```typescript\nimport Typewriter from \"react-typewriter-animate\";\nimport \"react-typewriter-animate/dist/Typewriter.css\";\n\nclass Example_Override_WordBlock extends React.Components {\n  render() {\n    return (\n      \u003cdiv className=\"root\"\u003e\n        \u003cTypewriter\n          dataToRotate={[\n            // Banner 1\n            [\n              { type: \"word\", text: \"I'm typing fast until here\" },\n              { type: \"word\", text: \"...\", override: { maxTypespeed: 600 } },\n            ],\n            // Banner 2\n            [{ type: \"word\", text: \"I'm Anh Tu.\" }],\n          ]}\n        /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n### Example with override cursor in WordBlock\n\n```typescript\nimport Typewriter from \"react-typewriter-animate\";\nimport \"react-typewriter-animate/dist/Typewriter.css\";\n\nclass Example_Override_Cursor_WordBlock extends React.Components {\n  render() {\n    return (\n      \u003cdiv className=\"root\"\u003e\n        \u003cTypewriter\n          dataToRotate={[\n            // Banner 1\n            [\n              { type: \"word\", text: \"Changing cursor...\" },\n              {\n                type: \"word\",\n                text: \"now!\",\n                cursor: { char: \"😀\", cursorClass: \"css-class\" },\n              },\n            ],\n            // Banner 2\n            [{ type: \"word\", text: \"I'm Anh Tu.\" }],\n          ]}\n        /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n### Example with styled WordBlock\n\n```typescript\n\nimport Typewriter from 'react-typewriter-animate';\nimport \"react-typewriter-animate/dist/Typewriter.css\";\n\nclass Example_Styled_WordBlock extends React.Components {\n  render() {\n    return (\n      \u003cdiv className=\"root\"\u003e\n        \u003cTypewriter\n          dataToRotate={[\n            // Banner 1\n            [\n              { type: \"word\", text: \"Hello\", spanClass: \"css-class-name\" },\n              { type: \"word\", text: \" guys\" }\n            ],\n            // Banner 2\n            [\n              { type: \"word\", text: \"I'm Anh Tu.\" }\n            ]\n          ]}\n        /\u003e\n      \u003c/div\u003e\n    ):\n  }\n}\n\n```\n\n### Example with overwrite style object: classes\n\n```typescript\nimport Typewriter from \"react-typewriter-animate\";\nimport \"react-typewriter-animate/dist/Typewriter.css\";\nimport \"./overwrite.css\";\n\n/**\n *  Default styles:\n *\n *  .Typewriter-cursor {\n *     --cursor-blink-rate: 900ms;\n *\n *     color: inherit;\n *     transition: all 0.2s;\n *  }\n *\n *  .Typewriter-blink {\n *    animation: Typewriter-blink-keyframe var(--cursor-blink-rate) step-end infinite;\n *  },\n *\n *  @keyframes Typewriter-blink-keyframe {\n *    0% {\n *      opacity: 0;\n *    }\n *    50% {\n *      opacity: 1;\n *    }\n *  }\n */\n\n/**\n *  ./overwrite.css file:\n *\n *  .typewriter-container-overwrite {\n *    color: \"white\";\n *    background-color: \"blue\";\n *  }\n */\n\nclass Example_Overwrite_Style extends React.Components {\n  render() {\n    return (\n      \u003cdiv className=\"root\"\u003e\n        \u003cTypewriter\n          containerClass=\"typewriter-container-overwrite\"\n          dataToRotate={[\n            // Banner 1\n            [\n              { type: \"word\", text: \"I'm typing fast until here\" },\n              { type: \"word\", text: \"...\", override: { maxTypespeed: 600 } },\n            ],\n            // Banner 2\n            [{ type: \"word\", text: \"I'm Anh Tu.\" }],\n          ]}\n        /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n### Example with delete\n\n```typescript\nimport Typewriter from \"react-typewriter-animate\";\nimport \"react-typewriter-animate/dist/Typewriter.css\";\n\nclass Example_Delete extends React.Components {\n  render() {\n    return (\n      \u003cdiv className=\"root\"\u003e\n        \u003cTypewriter\n          dataToRotate={[\n            // Banner 1\n            [\n              {\n                type: \"word\",\n                text: \"What's up?\",\n                spanClass: \"css-class-name\",\n              },\n              { type: \"action\", action: \"delete\", amount: \"up?\".length },\n              { type: \"word\", text: \"going on, guys?\" },\n            ],\n            // Banner 2\n            [{ type: \"word\", text: \"I'm Anh Tu.\" }],\n          ]}\n        /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n### Example with combo: start flag and function\n\n```typescript\nimport Typewriter from \"react-typewriter-animate\";\nimport \"react-typewriter-animate/dist/Typewriter.css\";\n\nclass Example_Start_Function extends React.Components {\n  state = {\n    start: false,\n  };\n\n  render() {\n    const { start } = this.state;\n\n    return (\n      \u003cdiv className=\"root\"\u003e\n        \u003ch1 className=\"title\"\u003e\n          \u003cTypewriter\n            dataToRotate={[\n              [\n                { type: \"word\", text: \"Here we go!\" },\n                {\n                  type: \"action\",\n                  action: \"function\",\n                  func: () =\u003e {\n                    console.log(\"Hello\");\n                    this.setState({\n                      start: true,\n                    });\n                  },\n                  wait: 1000,\n                },\n              ],\n            ]}\n          /\u003e\n        \u003c/h1\u003e\n\n        \u003ch1 className=\"description\"\u003e\n          \u003cTypewriter\n            start={start}\n            dataToRotate={[\n              [\n                {\n                  type: \"word\",\n                  text: \"Hello guys!\",\n                },\n              ],\n              [{ type: \"word\", text: \"I'm Tu\" }],\n            ]}\n          /\u003e\n        \u003c/h1\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoanhtu07%2Freact-typewriter-animate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdoanhtu07%2Freact-typewriter-animate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoanhtu07%2Freact-typewriter-animate/lists"}