{"id":13746938,"url":"https://github.com/luisvinicius167/ityped","last_synced_at":"2025-05-15T15:09:35.169Z","repository":{"id":37470259,"uuid":"78159147","full_name":"luisvinicius167/ityped","owner":"luisvinicius167","description":"Dead simple Javascript animated typing, with no dependencies.","archived":false,"fork":false,"pushed_at":"2021-05-12T18:29:28.000Z","size":444,"stargazers_count":2325,"open_issues_count":15,"forks_count":128,"subscribers_count":52,"default_branch":"master","last_synced_at":"2025-03-31T20:06:29.079Z","etag":null,"topics":["ityped","javascript","letters","typed"],"latest_commit_sha":null,"homepage":"https://ityped.surge.sh/","language":"JavaScript","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/luisvinicius167.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-06T00:21:51.000Z","updated_at":"2025-03-06T12:10:15.000Z","dependencies_parsed_at":"2022-08-03T03:15:42.238Z","dependency_job_id":null,"html_url":"https://github.com/luisvinicius167/ityped","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luisvinicius167%2Fityped","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luisvinicius167%2Fityped/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luisvinicius167%2Fityped/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luisvinicius167%2Fityped/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/luisvinicius167","download_url":"https://codeload.github.com/luisvinicius167/ityped/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247730068,"owners_count":20986404,"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":["ityped","javascript","letters","typed"],"created_at":"2024-08-03T06:01:06.333Z","updated_at":"2025-04-07T21:11:00.546Z","avatar_url":"https://github.com/luisvinicius167.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# iTyped\n\n[![npm package](https://img.shields.io/badge/npm-v1.0.3-lightgray.svg)](https://www.npmjs.com/package/ityped)\n\n\u003e Dead simple Animated typing, with no dependencies.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://cdn.rawgit.com/luisvinicius167/ityped/master/img/itypedjs.gif\" width=\"400\"/\u003e\n\u003c/p\u003e\n\n[ Demo ➞](https://ityped.surge.sh/)\n\nEnter in any string, and watch it type at the speed you've set, backspace what it's typed,\nand begin a new sentence for however many strings you've set.\n\n---\n\n\nFeatures\n------------\n * iTyped has a tiny size: 2 kB.\n * iTyped has no jQuery dependency.\n * Just install and enjoy!\n * Placeholder input support.\n\nAt now, if you just need to render Strings, **iTyped** is the best solution for you.\n\n\nInstallation\n------------\n\n#### NPM\n\n~~~\nnpm install ityped\n~~~\n\n#### Yarn\n\n~~~\nyarn add ityped\n~~~\n\n#### Browser\n\n~~~\nhttps://unpkg.com/ityped@1.0.3\n~~~\n\n### CSS\n\nCSS animations are build upon initialzation in JavaScript. But, you can customize them at your will! These classes are:\n~~~ css\n/* Cursor */\n.ityped-cursor {}\n~~~ \n\nWant the animated blinking cursor?\n~~~ css\n.ityped-cursor {\n    font-size: 2.2rem;\n    opacity: 1;\n    -webkit-animation: blink 0.3s infinite;\n    -moz-animation: blink 0.3s infinite;\n    animation: blink 0.3s infinite;\n    animation-direction: alternate;\n}\n\n@keyframes blink {\n    100% {\n        opacity: 0;\n    }\n}\n\n@-webkit-keyframes blink {\n    100% {\n        opacity: 0;\n    }\n}\n\n@-moz-keyframes blink {\n    100% {\n        opacity: 0;\n    }\n}\n~~~ \n\n### Use with multiples instances at the same time\n\n~~~ html\n\n\u003cspan id=\"one\"\u003e\u003c/span\u003e\n\u003cspan id=\"other\"\u003e\u003c/span\u003e\n~~~ \n\n~~~ javascript\n  import { init } from 'ityped'\n  \n  const oneElement = document.querySelector('#one')\n  const otherElement = document.querySelector('#other')\n  \n  init(oneElement, { showCursor: false, strings: ['Nice', 'One' ] });\n  init(otherElement, { disableBackTyping: true, strings: ['iTyped is', 'Awesome'] });\n~~~ \n\n### Use with React.js\n~~~ javascript\n\n  import React, { Component } from 'react'\n  import { init } from 'ityped'\n  \n  export default class Hello extends Component {\n    componentDidMount(){\n      const myElement = document.querySelector('#myElement')\n      init(myElement, { showCursor: false, strings: ['Use with React.js!', 'Yeah!' ] })\n    }\n    render(){\n      return \u003cdiv id=\"myElement\"\u003e\u003c/div\u003e\n    }\n  }\n~~~ \n\n\n### Customization\n\n~~~ javascript\n  init(\"#element\", {\n  \n    /**\n     * @param {Array} strings An array with the strings that will be animated \n     */\n     strings: ['Put your strings here...', 'and Enjoy!']\n    \n    /**\n     * @param {Number} typeSpeed Type speed in milliseconds\n     */\n     typeSpeed:  100,\n   \n    /**\n     * @param {Number} backSpeed Type back speed in milliseconds\n     */\n     backSpeed:  50,\n    \n    /**\n     * @param {Number} startDelay Time before typing starts\n     */\n     startDelay: 500,\n    \n    /**\n     * @param {Number} backDelay Time before backspacing\n     */\n     backDelay:  500,\n    \n    /**\n     * @param {Boolean} loop The animation loop\n     */\n     loop:       false,\n    \n    /**\n     * @param {Boolean} showCursor Show the cursor element\n     */\n     showCursor: true,\n    \n    /**\n     * @param {Boolean} placeholder Write the string in the placeholder content\n     */\n     placeholder: false,\n    \n    /**\n     * @param {Boolean} disableBackTyping Disable back typing for the last string sentence \n     */\n     disableBackTyping: false,\n    \n    /**\n     * @property {String} cursorChar character for cursor\n     */\n     cursorChar: \"|\",\n    \n    \n    // optional: The callback called (if `loop` is false) \n    // once the last string was typed\n    /**\n     * @property {Function} onFinished The callback called , if `loop` is false,\n     * once the last string was typed\n     */\n    onFinished: function(){},\n  }\n~~~ \n\nThanks for checking this out.\n\nIf you're using this, let me know! I'd love to see it.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluisvinicius167%2Fityped","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fluisvinicius167%2Fityped","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluisvinicius167%2Fityped/lists"}