{"id":19298776,"url":"https://github.com/devinceble/react-typist","last_synced_at":"2025-08-01T08:34:52.889Z","repository":{"id":71205253,"uuid":"377023303","full_name":"devinceble/react-typist","owner":"devinceble","description":null,"archived":false,"fork":false,"pushed_at":"2021-06-15T03:27:00.000Z","size":28,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-13T08:05:58.753Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devinceble.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","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":"2021-06-15T03:24:26.000Z","updated_at":"2021-06-15T03:27:03.000Z","dependencies_parsed_at":null,"dependency_job_id":"6fff2a66-522c-4d42-bd4f-7dc81e64d8e2","html_url":"https://github.com/devinceble/react-typist","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/devinceble/react-typist","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devinceble%2Freact-typist","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devinceble%2Freact-typist/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devinceble%2Freact-typist/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devinceble%2Freact-typist/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devinceble","download_url":"https://codeload.github.com/devinceble/react-typist/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devinceble%2Freact-typist/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259606867,"owners_count":22883556,"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":[],"created_at":"2024-11-09T23:09:06.721Z","updated_at":"2025-06-13T08:06:03.132Z","avatar_url":"https://github.com/devinceble.png","language":"JavaScript","readme":"# React Typist [![npm](https://img.shields.io/npm/dm/react-typist.svg)]() [![npm](https://img.shields.io/npm/v/react-typist.svg)]()\nReact Component for making typing animations. Wrap `Typist` around your text or any\nelement tree to animate text inside the tree. Easily stylable and highly\nconfigurable.\n\n\n## Install\n```shell\nnpm install react-typist --save\n```\n\n\n## Live Example\n* \u003ca href=\"//jstejada.github.io/react-typist\" target=\"_blank\"\u003eBasic example\u003c/a\u003e\n\n\n## Basic Usage\n#### CommonJS Module (using webpack or browserify):\n```jsx\nimport React, {Component} from 'react';\nimport Typist from 'react-typist';\n\nexport default class MyComponent extends Component {\n\n  render() {\n    return (\n      \u003cTypist\u003e\n        Animate this text.\n      \u003c/Typist\u003e\n    );\n  }\n}\n```\n\n#### UMD module:\nInclude `dist/standalone/Typist.js` into your build, using whatever build tool\nor manually entering a `\u003cscript\u003e` tag.\n\n\u003ca name=\"cssBlink\"\u003e\u003c/a\u003e\n#### CSS\nTypist contains a simple CSS file to make the cursor at the end of the text\nblink. To include it, you must include\n[`dist/Typist.css`](/dist/Typist.css) in your build.\n\n\n## Children\nTypist will animate any text present in its descendents. Each text\nnode will be animated as it is encountered in depth-first traversal of the\n`children` tree, one after the other.\n\nTypist can take as `children` any valid node that can be rendered in a React\napplication, i.e. it could be undefined, null, a boolean, a number, a string,\na React element, or an array of any of those types recursively.\n\nThis also implies that you are free to pass any props to the `children` of Typist,\nincluding your own css classes (as in any React application). This allows you to\neasily style your text inside Typist:\n\n```jsx\n\u003cTypist\u003e\n  \u003cspan className=\"my-custom-class\"\u003e First Sentence \u003c/span\u003e\n  \u003cbr /\u003e\n  \u003cdiv className=\"container\"\u003e\n    \u003cp\u003e This will be animated after first sentence is complete \u003c/p\u003e\n    \u003cMyComponent prop1=\"val1\"\u003e More text. \u003c/MyComponent\u003e\n  \u003c/div\u003e\n  Final sentence\n\u003c/Typist\u003e\n```\n\nRefer to [`examples/`](/examples) for more examples.\n\n\n## Typist.Delay\nIn order to insert delays into your animation, you can use the `Typist.Delay`\nComponent:\n\n```jsx\n\u003cTypist\u003e\n  \u003cp\u003e First Sentence \u003c/p\u003e\n  \u003cTypist.Delay ms={500} /\u003e\n  \u003cbr /\u003e\n  This won't be animated until 500ms after the first sentenced is rendered\n\u003c/Typist\u003e\n```\n\nRefer to [`examples/`](/examples) for more examples.\n\n### Typist.Delay Props\n* [`ms`](#ms)\n\n\u003ca name=\"ms\"\u003e\u003c/a\u003e\n#### ms\n*Required*\n\nMilliseconds to apply for the delay\n\n\n## Typist.Backspace\n\nTypist also supports backspace animations via the `Typist.Backspace` Component:\n\n```jsx\n\u003cTypist\u003e\n  \u003cspan\u003e First Sentence \u003c/span\u003e\n  \u003cTypist.Backspace count={8} delay={200} /\u003e\n  \u003cspan\u003e Phrase \u003c/span\u003e\n\u003c/Typist\u003e\n```\n\nRefer to [`examples/`](/examples) for more examples.\n\n### Typist.Backspace Props\n* [`count`](#count)\n* [`delay`](#delay)\n\n\u003ca name=\"count\"\u003e\u003c/a\u003e\n#### count\n*Default*: `1`\n\nNumber of characters to backspace\n\n\u003ca name=\"delay\"\u003e\u003c/a\u003e\n#### delay\n*Default*: `0`\n\nDelay in milliseconds before the backspace animation starts\n\n\n## Typist Props\n* [`className`](#className)\n* [`avgTypingDelay`](#avgTypingDelay)\n* [`stdTypingDelay`](#stdTypingDelay)\n* [`startDelay`](#startDelay)\n* [`cursor`](#cursor)\n* [`onCharacterTyped`](#onCharacterTyped)\n* [`onLineTyped`](#onLineTyped)\n* [`onTypingDone`](#onTypingDone)\n* [`delayGenerator`](#delayGenerator)\n\n\u003ca name=\"className\"\u003e\u003c/a\u003e\n#### className\n*Default*: `null`\n\nCSS class name to be applied to the Typist root node. Typist will always\nhave the CSS class `Typist` applied to it.\n\n```jsx\n\u003cTypist className=\"MyTypist\"\u003e Animate this text. \u003c/Typist\u003e\n```\n will produce:\n```jsx\n\u003cdiv class=\"Typist MyTypist\"\u003e Animate this text. \u003c/div\u003e\n```\n\n\u003ca name=\"avgTypingDelay\"\u003e\u003c/a\u003e\n#### avgTypingDelay\n*Default*: `70`\n\nAverage typing delay in milliseconds between every keystroke of the typing\nanimation **(Less is faster)**. The distribution of the typing delays between\nstrokes is not uniform, to make the animation more human like.\n\n\u003ca name=\"stdTypingDelay\"\u003e\u003c/a\u003e\n#### stdTypingDelay\n*Default*: `25`\n\nStandard deviation of typing delay between keystrokes of the typing animation.\n**(Less means more uniform, i.e. less variance between values)**.\n\n\u003ca name=\"startDelay\"\u003e\u003c/a\u003e\n#### startDelay\n*Default*: `0`\n\nMilliseconds before typing animation begins.\n\n\u003ca name=\"cursor\"\u003e\u003c/a\u003e\n#### cursor\n*Default*:\n```js\n{\n  show: true,\n  blink: true,\n  element: '|',\n  hideWhenDone: false,\n  hideWhenDoneDelay: 1000,\n}\n```\n\nObject containing options for cursor:\n\n* `show (bool)`: whether to display cursor at the end of text.\n* `blink (bool)`: whether to add blinking animation to cursor. You must also\ninclude the [css](#cssBlink)\n* `element (string)`: character to use for the cursor\n* `hideWhenDone (bool)`: whether the cursor should be hidden after tyiping\nanimation is complete.\n* `hideWhenDoneDelay (int)`: delay in ms to be applied before hiding cursor when\ntyping animation is complete.\n\n\u003ca name=\"onCharacterTyped\"\u003e\u003c/a\u003e\n#### onCharacterTyped\nFunction to be called every time a character is typed on the screen.\n\n```js\nfunction(character, charIdx) {\n  ...\n}\n```\n\n\u003ca name=\"onLineTyped\"\u003e\u003c/a\u003e\n#### onLineTyped\nFunction to be called every time a line is typed on the screen.\n\n```js\nfunction(line, lineIdx) {\n  ...\n}\n```\n\n\u003ca name=\"onTypingDone\"\u003e\u003c/a\u003e\n#### onTypingDone\nFunction to be called when typing animation is complete.\n\n\u003ca name=\"delayGenerator\"\u003e\u003c/a\u003e\n#### delayGenerator\n*Default*: [`gaussianDistribution`][normal-dist]\n\nFunction to be called to generate the typing delay (in ms) for every keystroke\nof the animation. Every time this function is called it should return a value\nin milliseconds. This function can be used to provide your own typing delay\ndistribution, for example uniform (e.g. always 100ms), or a deterministic\ndistribution.\n\nHowever, if you wish to insert delays at specific points in the animation,\nconsider useing the [`Delay`](#typistdelay) Component instead.\n\n```js\nfunction(mean, std, current = {line, lineIdx, character, charIdx, defDelayGenerator}) {\n  ...\n}\n```\n\n* `mean (number)`: Average typing delay. Will be the value of [`props.avgTypingDelay`](#avgTypingDelay)\n* `std (number)`: Standard deviation of typing delay. Will be the value of [`props.stdTypingDelay`](#stdTypingDelay)\n* `current.line (string)`: Value of line of text (Typist child) currently being animated.\n* `current.lineIdx (int)`: Index of line of text (Typist child) currently being animated.\n* `current.character (string)`: Value of character that was just rendered.\n* `current.charIdx (int)`: Index of character that was just rendered.\n* `current.defDelayGenerator (function)`: Reference to default delay\ngenerator function to be able to fall back to.\n\n\nThis function can also be used to introduce delays at specific points in the\ntyping animation.\n\ne.g.:\n```js\nfunction(mean, std, {line, lineIdx, charIdx, defDelayGenerator}) {\n  // Delay the animation for 2 seconds at the last character of the first line\n  if (lineIdx === 0 \u0026\u0026 charIdx === line.length - 1) {\n    return 2000;\n  }\n  return defDelayGenerator();\n}\n```\n\n\n## Troubleshooting\n### Internet Explorer Compatibility\nReact Typist makes use of Array.from() which is not supported in IE.\n\n`SCRIPT438: Object doesn't support property or method 'from' Typist.js (449,1)`\n\nTo resolve this, [babel-polyfill](https://babeljs.io/docs/usage/polyfill/) can be added to your project.\n\n ```shell\n npm install --save babel-polyfill\n ```\n\nYou can now include this module in your app at the entry point.\n\nES6:\n```js\nimport 'babel-polyfill'\n```\n\nCommonJS:\n```js\nrequire('babel-polyfill')\n```\n\n## Development\n\nTo build the examples and start the dev server, run:\n```shell\nnpm start\n```\nNow, open `http://localhost:8080` and start hacking!\n\n\nIf you just want to build the examples, run:\n```shell\nnpm run examples\n```\n\n\n## Running Tests\n\n```shell\nnpm test\n```\n\n\n## License\n\n[MIT](http://mit-license.org)\n\n[normal-dist]: https://en.wikipedia.org/wiki/Normal_distribution\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevinceble%2Freact-typist","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevinceble%2Freact-typist","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevinceble%2Freact-typist/lists"}