{"id":15634875,"url":"https://github.com/awran5/react-simple-typewriter","last_synced_at":"2025-04-05T04:10:22.601Z","repository":{"id":38950003,"uuid":"306368901","full_name":"awran5/react-simple-typewriter","owner":"awran5","description":"A simple react component for adding a nice typewriter effect to your project.","archived":false,"fork":false,"pushed_at":"2024-04-25T09:52:03.000Z","size":1731,"stargazers_count":135,"open_issues_count":18,"forks_count":26,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-29T03:04:21.645Z","etag":null,"topics":["hook","react","react-component","react-hooks","typewriter","typewriter-effect"],"latest_commit_sha":null,"homepage":"https://react-simple-typewriter.vercel.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/awran5.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2020-10-22T14:46:41.000Z","updated_at":"2025-03-15T16:01:20.000Z","dependencies_parsed_at":"2024-06-18T14:03:58.498Z","dependency_job_id":"62863e68-15ca-4b31-a64b-541a5dd45407","html_url":"https://github.com/awran5/react-simple-typewriter","commit_stats":{"total_commits":124,"total_committers":5,"mean_commits":24.8,"dds":"0.11290322580645162","last_synced_commit":"91f4a4657226fd821adb63843648b34502da4570"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/awran5%2Freact-simple-typewriter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/awran5%2Freact-simple-typewriter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/awran5%2Freact-simple-typewriter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/awran5%2Freact-simple-typewriter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/awran5","download_url":"https://codeload.github.com/awran5/react-simple-typewriter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247284949,"owners_count":20913704,"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":["hook","react","react-component","react-hooks","typewriter","typewriter-effect"],"created_at":"2024-10-03T10:58:18.217Z","updated_at":"2025-04-05T04:10:22.564Z","avatar_url":"https://github.com/awran5.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Simple Typewriter\n\n\u003e A simple react component for adding a nice typewriter effect to your project.\n\n[![NPM](https://img.shields.io/npm/v/react-simple-typewriter.svg)](https://www.npmjs.com/package/react-simple-typewriter) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)![npm bundle size](https://img.shields.io/bundlephobia/min/react-simple-typewriter)![GitHub](https://img.shields.io/github/license/awran5/react-simple-typewriter)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./screenshot.gif\" alt=\"screenshot\" /\u003e\n\u003c/p\u003e\n \n## Install\n\n#### npm\n\n```sh\nnpm i react-simple-typewriter\n```\n\n#### Yarn\n\n```sh\nyarn add react-simple-typewriter\n```\n\n---\n\n## Usage\n\nThere are two ways to `Typewriter`:\n\n## 1. Component\n\n```jsx\nimport React from 'react'\nimport { Typewriter } from 'react-simple-typewriter'\n\nconst MyComponent = () =\u003e {\n  return (\n    \u003cdiv className='App'\u003e\n      \u003cTypewriter {/* Props */} /\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n### Component Props\n\n| Prop             |       Type        | Options  | Description                                                                                |      Default       |\n| ---------------- | :---------------: | -------- | ------------------------------------------------------------------------------------------ | :----------------: |\n| `words`          |       array       | Required | Array of strings holding the words                                                         | `['Hello', '...']` |\n| `typeSpeed`      |      number       | Optional | Character typing speed in Milliseconds                                                     |        `80`        |\n| `deleteSpeed`    |      number       | Optional | Character deleting speed in Milliseconds                                                   |        `50`        |\n| `delaySpeed`     |      number       | Optional | Delay time between the words in Milliseconds                                               |       `1500`       |\n| `loop`           | number \\| boolean | Optional | Control how many times to run. `0 \\| false` to run infinitely                              |        `1`         |\n| `cursor`         |      boolean      | Optional | Show / Hide a cursor                                                                       |      `false`       |\n| `cursorStyle`    |     ReactNode     | Optional | Change the cursor style available if `cursor` is `enabled`                                 |        `\\|`        |\n| `cursorBlinking` |      boolean      | Optional | Enable cursor blinking animation                                                           |        `true`      |\n| `onLoopDone`     |     function      | Optional | Callback function that is triggered when loops are completed. available if `loop` is `\u003e 0` |        `-`         |\n| `onType`         |     function      | Optional | Callback function that is triggered while typing with typed words `count` passed           |        `-`         |\n| `onDelay`        |     function      | Optional | Callback function that is triggered on typing delay                                        |        `-`         |\n| `onDelete`       |     function      | Optional | Callback function that is triggered while deleting                                         |        `-`         |\n\n---\n\n### Usage Example\n\n```jsx\nimport React from 'react'\nimport { Typewriter } from 'react-simple-typewriter'\n\nconst MyComponent = () =\u003e {\n\n  const handleType = (count: number) =\u003e {\n    // access word count number\n    console.log(count)}\n  }\n\n  const handleDone = () =\u003e {\n    console.log(`Done after 5 loops!`)\n  }\n\n  return (\n    \u003cdiv className='App'\u003e\n      \u003ch1 style={{ paddingTop: '5rem', margin: 'auto 0', fontWeight: 'normal' }}\u003e\n        Life is simple{' '}\n        \u003cspan style={{ color: 'red', fontWeight: 'bold' }}\u003e\n          {/* Style will be inherited from the parent element */}\n          \u003cTypewriter\n            words={['Eat', 'Sleep', 'Code', 'Repeat!']}\n            loop={5}\n            cursor\n            cursorStyle='_'\n            typeSpeed={70}\n            deleteSpeed={50}\n            delaySpeed={1000}\n            onLoopDone={handleDone}\n            onType={handleType}\n          /\u003e\n        \u003c/span\u003e\n      \u003c/h1\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n## 2. Hook\n\n**BREAKING CHANGES v5.0.0** Hook now returns `text` along with some useful `flags`:\n\n| Prop       |  Type   | Description                         |\n| ---------- | :-----: | ----------------------------------- |\n| `isType`   | boolean | Check if currently typing           |\n| `isDelete` | boolean | Check if currently deleting         |\n| `isDelay`  | boolean | Check if currently on delay         |\n| `isDone`   | boolean | Check if all running loops are done |\n\n```jsx\nimport { useTypewriter } from 'react-simple-typewriter'\n\nconst MyComponent = () =\u003e {\n  /**\n   * @returns\n   * text: [string] typed text\n   * NEW helper: {} helper flags\n   */\n  const [text, helper] = useTypewriter({\n    /* Config */\n  })\n\n  /* Hook helper */\n  const { isType, isDelete, isDelay, isDone } = helper\n\n  return (\n    \u003cdiv className='App'\u003e\n      \u003cspan\u003e{text}\u003c/span\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n### Hook Config\n\n| Prop          |       Type        | Options  | Description                                                                                |      Default       |\n| ------------- | :---------------: | -------- | ------------------------------------------------------------------------------------------ | :----------------: |\n| `words`       |       array       | Required | Array of strings holding the words                                                         | `['Hello', '...']` |\n| `typeSpeed`   |      number       | Optional | Character typing speed in Milliseconds                                                     |        `80`        |\n| `deleteSpeed` |      number       | Optional | Character deleting speed in Milliseconds                                                   |        `50`        |\n| `delaySpeed`  |      number       | Optional | Delay time between the words in Milliseconds                                               |       `1500`       |\n| `loop`        | number \\| boolean | Optional | Control how many times to run. `0 \\| false` to run infinitely                              |        `1`         |\n| `onLoopDone`  |     function      | Optional | Callback function that is triggered when loops are completed. available if `loop` is `\u003e 0` |        `-`         |\n| `onType`      |     function      | Optional | Callback function that is triggered while typing                                           |        `-`         |\n| `onDelete`    |     function      | Optional | Callback function that is triggered while deleting                                         |        `-`         |\n| `onDelay`     |     function      | Optional | Callback function that is triggered on typing delay                                        |        `-`         |\n\n### Hook Usage Example\n\n```jsx\nimport React from 'react'\nimport { useTypewriter } from 'react-simple-typewriter'\n\nconst MyComponent = () =\u003e {\n  const [text] = useTypewriter({\n    words: ['Hello', 'From', 'Typewriter', 'Hook!'],\n    loop: 0\n  })\n\n  return (\n    \u003cdiv className='App'\u003e\n      \u003cspan\u003e{text}\u003c/span\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n### Hook with Cursor\n\nIf you like to have the **Cursor** effect, you can `import` it as a separate `Component`\n\n```jsx\nimport React from 'react'\nimport { useTypewriter, Cursor } from 'react-simple-typewriter'\n\nconst MyComponent = () =\u003e {\n  const [text] = useTypewriter({\n    words: ['Hello', 'From', 'Typewriter', 'Hook!'],\n    loop: 3,\n    onLoopDone: () =\u003e console.log(`loop completed after 3 runs.`)\n  })\n\n  return (\n    \u003cdiv className='App'\u003e\n      \u003cspan\u003e{text}\u003c/span\u003e\n      \u003cCursor cursorColor='red' /\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n### Cursor Component Props\n\n| Prop             |   Type    | Options  | Description                       |  Default  |\n| ---------------- | :-------: | -------- | --------------------------------- | :-------: |\n| `cursorStyle`    | ReactNode | Optional | Change cursor style               |   `\\|`    |\n| `cursorColor`    |  String   | Optional | Change cursor color               | `inherit` |\n| `cursorBlinking` |  Boolean  | Optional | disable cursor blinking animation |  `true`   |\n\n---\n\n### [Demo](https://react-simple-typewriter.vercel.app/)\n\n\u003cbr /\u003e\n\n[![Edit react-simple-typewriter](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-simple-typewriter-uj8ix)\n\n### License\n\nMIT © [awran5](https://github.com/awran5/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fawran5%2Freact-simple-typewriter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fawran5%2Freact-simple-typewriter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fawran5%2Freact-simple-typewriter/lists"}