{"id":29605462,"url":"https://github.com/braisc/react-text-typist","last_synced_at":"2025-07-20T16:05:08.671Z","repository":{"id":40468168,"uuid":"304054059","full_name":"BraisC/react-text-typist","owner":"BraisC","description":"React component that simulates human typing on a keyboard.","archived":false,"fork":false,"pushed_at":"2023-05-03T16:02:47.000Z","size":1131,"stargazers_count":34,"open_issues_count":1,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-15T03:45:45.067Z","etag":null,"topics":["npm-package","react","react-component","react-library","typescript","typing-animation","typing-effect"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-text-typist","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BraisC.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-14T15:15:42.000Z","updated_at":"2025-06-02T12:40:19.000Z","dependencies_parsed_at":"2024-06-20T21:48:57.606Z","dependency_job_id":"3d09186b-78fe-4fc1-81fe-f4444e984f81","html_url":"https://github.com/BraisC/react-text-typist","commit_stats":{"total_commits":61,"total_committers":5,"mean_commits":12.2,"dds":"0.21311475409836067","last_synced_commit":"3e60c9a42b9245f475a17573d90702d575ab2b3c"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/BraisC/react-text-typist","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BraisC%2Freact-text-typist","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BraisC%2Freact-text-typist/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BraisC%2Freact-text-typist/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BraisC%2Freact-text-typist/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BraisC","download_url":"https://codeload.github.com/BraisC/react-text-typist/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BraisC%2Freact-text-typist/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266152351,"owners_count":23884493,"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":["npm-package","react","react-component","react-library","typescript","typing-animation","typing-effect"],"created_at":"2025-07-20T16:05:06.995Z","updated_at":"2025-07-20T16:05:08.661Z","avatar_url":"https://github.com/BraisC.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://github.com/BraisC/react-text-typist/blob/master/banner-gif.gif?raw=true\" /\u003e \u003ch1 align=\"center\"\u003eReact-Text-Typist\u003c/h1\u003e\n\u003c/p\u003e\n\n[![npm](https://img.shields.io/npm/v/react-text-typist?logo=npm\u0026style=flat-square)](https://www.npmjs.com/package/react-text-typist)\n[![npm size](https://img.shields.io/bundlephobia/min/react-text-typist?label=size\u0026logo=npm\u0026style=flat-square)](https://www.npmjs.com/package/react-text-typist)\n[![npm type definitions](https://img.shields.io/npm/types/react-text-typist?logo=npm\u0026style=flat-square)](https://www.npmjs.com/package/react-text-typist)\n[![npm downloads](https://img.shields.io/npm/dw/react-text-typing?logo=npm\u0026style=flat-square)](https://www.npmjs.com/package/react-text-typist)\n![github last commit](https://img.shields.io/github/last-commit/BraisC/react-text-typist?logo=github\u0026style=flat-square)\n![github contributors](https://img.shields.io/github/contributors/braisc/react-text-typist?logo=github\u0026style=flat-square)\n![](https://img.shields.io/badge/PRs-Welcome-brightgreen?logo=github\u0026style=flat-square\u0026logoColor=adbfb)\n[![dependency](https://img.shields.io/npm/dependency-version/react-text-typist/peer/react?style=flat-square)](https://reactjs.org/)\n[![](https://img.shields.io/badge/Made%20for-React-61bdfb?logo=react\u0026style=flat-square\u0026logoColor=adbfb)](https://reactjs.org/)\n\nA simple React component to create typing animations with multiple sentences.\n\nI you need a typing effect on your app this package may be what you need :)\n\n## Install\n\n```shell\nnpm install react-text-typist --save\n```\n\n## Demos\n\n### \u003ca href=\"https://react-text-typist.braiscao.dev\" target=\"_blank\"\u003eDemo Website\u003c/a\u003e\n\n## Basic Usage\n\n```jsx\nimport React from 'react';\nimport Typist from 'react-text-typist';\n\nexport default App() =\u003e {\n    return (\n      \u003cTypist sentences={['First Sentence', 'Second Sentence', 'Third Sentence']} loop={false} /\u003e\n    );\n}\n```\n\n## Props\n\nTypist accepts some props to customize the component behaviour:\n\n|     Property     |     Type      |      Default       |                Description                 | Required |\n| :--------------: | :-----------: | :----------------: | :----------------------------------------: | :------: |\n|    sentences     |   string[]    |                    |         Array of sentences to type         |   yes    |\n|    className     |    string     |                    |      Classname to customize component      |    no    |\n| cursorClassName  |    string     |                    |       Classname to customize cursor        |    no    |\n| cursorBlinkSpeed |    string     |      700 (ms)      |     Duration of cursor blink animation     |    no    |\n|   cursorColor    |    string     |                    |              Color of cursor               |    no    |\n|   cursorSmooth   |    boolean    |       false        |          Cursor smooth animation           |    no    |\n|    showCursor    |    boolean    |        true        |            Hide or show cursor             |    no    |\n|    typingSpeed   |    number     |      80 (ms)       |  Typing speed (ms between each character)  |    no    |\n|  deletingSpeed   |    number     |      30 (ms)       | Deleting speed (ms between each character) |    no    |\n|    pauseTime     |    number     |      1000(ms)      |          Pause between sentences           |    no    |\n|    startDelay    |    number     |       0(ms)        |         Delay before start typing          |    no    |\n|   cursorDelay    |    number     | same as startDelay | Delay before showing cursor for first time |    no    |\n|       loop       |    boolean    |        true        |      Choose if you want infinite loop      |    no    |\n|      style       | CSSProperties |         {}         |    Inline CSS to apply to the component    |    no    |\n|    defaultText   |    string     |         ''         |  Default text to render, useful with SSR   |    no    |\n|   onTypeFinish   |    Function   |                    |        Callback when finished typing       |    no    |\n\n## Customization\n\nYou can apply your own class to the text and the cursor using the 'className' prop. Also you can select the cursor in CSS via the 'typist-cursor' class or you can apply your own class just to the cursor using the 'cursorClassName' prop.\n\n```jsx\nexport default App() =\u003e {\n    return (\n      \u003cTypist className={'myTypist'} cursorClassName={'myCursor'} sentences={['First Sentence', 'Second Sentence', 'Third Sentence']} loop={false} /\u003e\n    );\n}\n```\n\n```css\n/* Default cursor class */\n.typist-cursor {\n  font-size: 16px;\n  color: red;\n}\n/* This will apply to text and cursor */\n.myTypist {\n  font-size: 16px;\n  color: red;\n}\n\n/* This will apply only to cursor */\n.myCursor {\n  font-size: 16px;\n  color: red;\n}\n```\n\nThe component is also compatible with libraries like 'styled-components':\n\n```jsx\nimport React from 'react';\nimport Typist from 'react-text-typist';\nimport styled, { createGlobalStyle } from 'styled-components';\n\nconst StyledTypist = styled(Typist)`\n  font-size: 4rem;\n  color: blue;\n`;\n\nexport default App() =\u003e {\n    return (\n      \u003cStyledTypist sentences={['First Sentence', 'Second Sentence', 'Third Sentence']} loop={false} /\u003e\n    );\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbraisc%2Freact-text-typist","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbraisc%2Freact-text-typist","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbraisc%2Freact-text-typist/lists"}