{"id":13623040,"url":"https://github.com/camwiegert/typical","last_synced_at":"2025-05-15T00:12:56.642Z","repository":{"id":38325670,"uuid":"211405607","full_name":"camwiegert/typical","owner":"camwiegert","description":"Animated typing in ~400 bytes 🐡 of JavaScript","archived":false,"fork":false,"pushed_at":"2023-09-09T20:50:59.000Z","size":22,"stargazers_count":1573,"open_issues_count":4,"forks_count":61,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-04-06T16:09:42.283Z","etag":null,"topics":["animation","javascript","module","typing"],"latest_commit_sha":null,"homepage":"","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/camwiegert.png","metadata":{"files":{"readme":"readme.md","changelog":null,"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}},"created_at":"2019-09-27T21:38:25.000Z","updated_at":"2025-04-05T12:48:56.000Z","dependencies_parsed_at":"2022-07-18T10:39:22.743Z","dependency_job_id":"fae6afca-b7a9-4a9f-a859-8af4c203d8dc","html_url":"https://github.com/camwiegert/typical","commit_stats":{"total_commits":29,"total_committers":3,"mean_commits":9.666666666666666,"dds":"0.13793103448275867","last_synced_commit":"919942b9ea4b0e1cd4326d25e34f923d78df2865"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/camwiegert%2Ftypical","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/camwiegert%2Ftypical/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/camwiegert%2Ftypical/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/camwiegert%2Ftypical/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/camwiegert","download_url":"https://codeload.github.com/camwiegert/typical/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248784772,"owners_count":21161177,"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":["animation","javascript","module","typing"],"created_at":"2024-08-01T21:01:27.326Z","updated_at":"2025-04-13T21:28:28.805Z","avatar_url":"https://github.com/camwiegert.png","language":"JavaScript","readme":"# typical\n\n\u003e Animated typing in ~400 bytes :blowfish: of JavaScript.\n\n- **Zero dependencies**\n- **MIT licensed** [→](https://github.com/camwiegert/typical/tree/master/LICENSE)\n- **Emoji support**\n- **Smart delete:** only delete what needs deleting\n- **Pausing:** pause between steps\n- **Looping:** easily loop from any point\n- **Waiting:** wait on arbitrary Promises\n- **Humanity:** slightly varied typing speed\n\n[**Demo →**](https://codepen.io/camwiegert/pen/rNNepYo)\n\n[![](https://repository-images.githubusercontent.com/211405607/1dd6e300-f8b2-11e9-8260-26ad1d49db17)](https://codepen.io/camwiegert/pen/rNNepYo \"Demo on CodePen\")\n\n---\n\n## Install\n\n```shell\nnpm install @camwiegert/typical\n```\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eMore install options\u003c/strong\u003e\u003c/summary\u003e\n  \u003cp\u003eInstead of using a package manager, you can download \u003ccode\u003etypical.js\u003c/code\u003e from \u003ca href=\"https://raw.githubusercontent.com/camwiegert/typical/master/typical.js\"\u003eGitHub\u003c/a\u003e and import it locally or import it directly from a CDN like \u003ca href=\"https://unpkg.com/@camwiegert/typical\"\u003eunpkg\u003c/a\u003e.\u003c/p\u003e\n\u003c/details\u003e\n\n## API\n\n```typescript\ntype(target: HTMLElement, ...steps: any[]) =\u003e Promise\u003cvoid\u003e;\n```\n\nThe module exports a single function, `type`, which takes a target element as its first argument, and any number of additional arguments as the steps to perform. Additional arguments perform actions based on their type:\n\n| Type       | Action                   |\n|:-----------|:-------------------------|\n| `string`   | Type text                |\n| `number`   | Pause (milliseconds)     |\n| `function` | Call with target element |\n| `Promise`  | Wait for resolution      |\n\n## Usage\n\nThe most basic usage of `type` is providing a target element and a string to type.\n\n```javascript\nimport { type } from '@camwiegert/typical';\n\ntype(element, 'text');\n```\n\n### Pausing\n\nIn order to pause typing at any point, pass a number of milliseconds to pause.\n\n```javascript\ntype(element, 'Hello', 1000, 'Hello world!');\n```\n\n### Looping\n\nIn order to loop, pass `type` as a parameter to itself at the point at which you'd like to start looping. It can be helpful to alias `type` as `loop` to be explicit.\n\n```javascript\nimport {\n    type,\n    type as loop\n};\n\nconst steps = [1000, 'Ready', 1000, 'Set', 1000, 'Go'];\n\ntype(element, ...steps, loop);\n```\n\nTo loop a finite amount, pass your steps multiple times.\n\n```javascript\ntype(element, ...steps, ...steps, ...steps);\n```\n\n### Waiting\n\nWhen passed a `Promise`, `type` will wait for it to resolve before continuing. Because `type` itself returns a `Promise`, that means you can wait on a set of steps to complete before starting another.\n\n```javascript\nconst init = type(target, 'In a moment...', 500);\n\ntype(target, init, 'start', 500, 'looping', loop);\n```\n\n### Functions\n\nFunction arguments are passed the target element, and can be useful for operating on the target element between steps. If you return a `Promise`, `type` will wait for it to resolve.\n\n```javascript\nconst toggle = (element) =\u003e\n    element.classList.toggle('is-typing');\n\ntype(target, toggle, 'Type me', toggle);\n```\n\n## Support\n\n- [x] Chrome\n- [x] Edge\n- [x] Firefox\n- [x] Safari\n- [ ] Internet Explorer\n\n## Related\n\n- [react-typical](https://github.com/catalinmiron/react-typical) - React component\n- [vue-typical](https://github.com/Turkyden/vue-typical) - Vue component\n","funding_links":[],"categories":["JavaScript","Animations"],"sub_categories":["Other"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcamwiegert%2Ftypical","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcamwiegert%2Ftypical","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcamwiegert%2Ftypical/lists"}