"content": "[](https://travis-ci.org/mattboldt/typed.js)\n[](https://codeclimate.com/github/mattboldt/typed.js)\n[]()\n[](https://img.shields.io/npm/dt/typed.js.svg)\n[](https://raw.githubusercontent.com/mattboldt/typed.js/master/LICENSE.txt)\n\n<img src=\"https://raw.githubusercontent.com/mattboldt/typed.js/master/logo-cropped.png\" width=\"450px\" title=\"Typed.js\" />\n\n### [Live Demo](http://www.mattboldt.com/demos/typed-js/) | [View All Demos](http://mattboldt.github.io/typed.js/) | [View Full Docs](http://mattboldt.github.io/typed.js/docs) | [mattboldt.com](http://www.mattboldt.com)\n\nTyped.js is a library that types. Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.\n\n---\n\n## Installation\n\n#### NPM\n\n```\nnpm install typed.js\n```\n\n#### Yarn\n\n```\nyarn add typed.js\n```\n\n#### CDN\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/
[email protected]\"></script>\n```\n\n#### Setup\n\nThis is really all you need to get going.\n\n```javascript\n// Can also be included with a regular script tag\nimport Typed from 'typed.js';\n\nvar options = {\n strings: ['<i>First</i> sentence.', '& a second sentence.'],\n typeSpeed: 40,\n};\n\nvar typed = new Typed('.element', options);\n```\n\n### Use with ReactJS\n\nHook-based function component: https://jsfiddle.net/mattboldt/60h9an7y/\n\nClass component: https://jsfiddle.net/mattboldt/ovat9jmp/\n\n### Use with Vue.js\n\nCheck out the Vue.js component: https://github.com/Orlandster/vue-typed-js\n\n### Use it as WebComponent\n\nCheck out the WebComponent: https://github.com/Orlandster/wc-typed-js\n\n## Wonderful sites that have used (or are using) Typed.js\n\nhttps://github.com/features/package-registry\n\nhttps://slack.com/\n\nhttps://envato.com/\n\nhttps://gorails.com/\n\nhttps://productmap.co/\n\nhttps://www.typed.com/\n\nhttps://apeiron.io\n\nhttps://git.market/\n\nhttps://commando.io/\n\nhttp://testdouble.com/agency.html\n\nhttps://www.capitalfactory.com/\n\nhttp://www.maxcdn.com/\n\nhttps://www.powerauth.com/\n\n---\n\n### Strings from static HTML (SEO Friendly)\n\nRather than using the `strings` array to insert strings, you can place an HTML `div` on the page and read from it.\nThis allows bots and search engines, as well as users with JavaScript disabled, to see your text on the page.\n\n```javascript\n<script>\n var typed = new Typed('#typed', {\n stringsElement: '#typed-strings'\n });\n</script>\n```\n\n```html\n<div id=\"typed-strings\">\n <p>Typed.js is a <strong>JavaScript</strong> library.</p>\n <p>It <em>types</em> out sentences.</p>\n</div>\n<span id=\"typed\"></span>\n```\n\n### Type Pausing\n\nYou can pause in the middle of a string for a given amount of time by including an escape character.\n\n```javascript\nvar typed = new Typed('.element', {\n // Waits 1000ms after typing \"First\"\n strings: ['First ^1000 sentence.', 'Second sentence.'],\n});\n```\n\n### Smart Backspacing\n\nIn the following example, this would only backspace the words after \"This is a\"\n\n```javascript\nvar typed = new Typed('.element', {\n strings: ['This is a JavaScript library', 'This is an ES6 module'],\n smartBackspace: true, // Default value\n});\n```\n\n### Bulk Typing\n\nThe following example would emulate how a terminal acts when typing a command and seeing its result.\n\n```javascript\nvar typed = new Typed('.element', {\n strings: ['git push --force ^1000\\n `pushed to origin with option force`'],\n});\n```\n\n### CSS\n\nCSS animations are built upon initialization in JavaScript. But, you can customize them at your will! These classes are:\n\n```css\n/* Cursor */\n.typed-cursor {\n}\n\n/* If fade out option is set */\n.typed-fade-out {\n}\n```\n\n## Customization\n\n```javascript\nvar typed = new Typed('.element', {\n /**\n * @property {array} strings strings to be typed\n * @property {string} stringsElement ID of element containing string children\n */\n strings: [\n 'These are the default values...',\n 'You know what you should do?',\n 'Use your own!',\n 'Have a great day!',\n ],\n stringsElement: null,\n\n /**\n * @property {number} typeSpeed type speed in milliseconds\n */\n typeSpeed: 0,\n\n /**\n * @property {number} startDelay time before typing starts in milliseconds\n */\n startDelay: 0,\n\n /**\n * @property {number} backSpeed backspacing speed in milliseconds\n */\n backSpeed: 0,\n\n /**\n * @property {boolean} smartBackspace only backspace what doesn't match the previous string\n */\n smartBackspace: true,\n\n /**\n * @property {boolean} shuffle shuffle the strings\n */\n shuffle: false,\n\n /**\n * @property {number} backDelay time before backspacing in milliseconds\n */\n backDelay: 700,\n\n /**\n * @property {boolean} fadeOut Fade out instead of backspace\n * @property {string} fadeOutClass css class for fade animation\n * @property {boolean} fadeOutDelay Fade out delay in milliseconds\n */\n fadeOut: false,\n fadeOutClass: 'typed-fade-out',\n fadeOutDelay: 500,\n\n /**\n * @property {boolean} loop loop strings\n * @property {number} loopCount amount of loops\n */\n loop: false,\n loopCount: Infinity,\n\n /**\n * @property {boolean} showCursor show cursor\n * @property {string} cursorChar character for cursor\n * @property {boolean} autoInsertCss insert CSS for cursor and fadeOut into HTML <head>\n */\n showCursor: true,\n cursorChar: '|',\n autoInsertCss: true,\n\n /**\n * @property {string} attr attribute for typing\n * Ex: input placeholder, value, or just HTML text\n */\n attr: null,\n\n /**\n * @property {boolean} bindInputFocusEvents bind to focus and blur if el is text input\n */\n bindInputFocusEvents: false,\n\n /**\n * @property {string} contentType 'html' or 'null' for plaintext\n */\n contentType: 'html',\n\n /**\n * Before it begins typing\n * @param {Typed} self\n */\n onBegin: (self) => {},\n\n /**\n * All typing is complete\n * @param {Typed} self\n */\n onComplete: (self) => {},\n\n /**\n * Before each string is typed\n * @param {number} arrayPos\n * @param {Typed} self\n */\n preStringTyped: (arrayPos, self) => {},\n\n /**\n * After each string is typed\n * @param {number} arrayPos\n * @param {Typed} self\n */\n onStringTyped: (arrayPos, self) => {},\n\n /**\n * During looping, after last string is typed\n * @param {Typed} self\n */\n onLastStringBackspaced: (self) => {},\n\n /**\n * Typing has been stopped\n * @param {number} arrayPos\n * @param {Typed} self\n */\n onTypingPaused: (arrayPos, self) => {},\n\n /**\n * Typing has been started after being stopped\n * @param {number} arrayPos\n * @param {Typed} self\n */\n onTypingResumed: (arrayPos, self) => {},\n\n /**\n * After reset\n * @param {Typed} self\n */\n onReset: (self) => {},\n\n /**\n * After stop\n * @param {number} arrayPos\n * @param {Typed} self\n */\n onStop: (arrayPos, self) => {},\n\n /**\n * After start\n * @param {number} arrayPos\n * @param {Typed} self\n */\n onStart: (arrayPos, self) => {},\n\n /**\n * After destroy\n * @param {Typed} self\n */\n onDestroy: (self) => {},\n});\n```\n\n## Contributing\n\n### [View Contribution Guidelines](./.github/CONTRIBUTING.md)\n\n## end\n\nThanks for checking this out. If you have any questions, I'll be on [Twitter](https://twitter.com/atmattb).\n\nIf you're using this, let me know! I'd love to see it.\n\nIt would also be great if you mentioned me or my website somewhere. [www.mattboldt.com](http://www.mattboldt.com)\n",
0 commit comments