{"id":20317919,"url":"https://github.com/deadcoder0904/react-typical","last_synced_at":"2025-04-11T18:02:51.930Z","repository":{"id":42724823,"uuid":"284927994","full_name":"deadcoder0904/react-typical","owner":"deadcoder0904","description":"Typist library made in React with TypeScript support","archived":false,"fork":false,"pushed_at":"2023-01-07T20:43:39.000Z","size":1361,"stargazers_count":6,"open_issues_count":8,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-25T13:51:14.328Z","etag":null,"topics":["react","react-typical","reactjs","typical","typist"],"latest_commit_sha":null,"homepage":"https://react-typical.vercel.app/","language":"TypeScript","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/deadcoder0904.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}},"created_at":"2020-08-04T08:55:30.000Z","updated_at":"2022-07-12T20:24:21.000Z","dependencies_parsed_at":"2023-02-08T01:30:57.377Z","dependency_job_id":null,"html_url":"https://github.com/deadcoder0904/react-typical","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deadcoder0904%2Freact-typical","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deadcoder0904%2Freact-typical/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deadcoder0904%2Freact-typical/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deadcoder0904%2Freact-typical/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/deadcoder0904","download_url":"https://codeload.github.com/deadcoder0904/react-typical/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247974574,"owners_count":21026742,"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":["react","react-typical","reactjs","typical","typist"],"created_at":"2024-11-14T18:37:18.471Z","updated_at":"2025-04-11T18:02:51.874Z","avatar_url":"https://github.com/deadcoder0904.png","language":"TypeScript","readme":"# React Typical\n\n\u003e Typist library made in React with TypeScript support by [@deadcoder0904](https://twitter.com/deadcoder0904)\n\n## Highlights\n\n- **Written in TypeScript**\n- **Zero dependencies**\n- **MIT licensed**\n- **Emoji support**\n- **Pausing**: pause between steps\n- **Looping**: easily loop from any point\n- **Humanity**: slightly varied typing speed\n\n## Install\n\n```bash\n$ npm install @deadcoder0904/react-typical\n```\n\n## Usage\n\n### Basic\n\n```tsx\nimport React from 'react'\nimport { ReactTypical } from '@deadcoder0904/react-typical'\n\nconst Index = () =\u003e (\n\t\u003cReactTypical\n\t\tsteps={['Hello', 'React Typical']}\n\t\twrapper=\"p\"\n\t/\u003e\n)\n```\n\n### Emoji Support\n\n```tsx\nimport React from 'react'\nimport { ReactTypical } from '@deadcoder0904/react-typical'\n\nconst Index = () =\u003e (\n\t\u003cReactTypical\n\t\tsteps={['💩',1000, '🙈',1000,'💖',1000,'🚀',1000,'👨‍🎤',1000]}\n\t\twrapper=\"p\"\n\t/\u003e\n)\n```\n\n### Pausing\n\nIn order to pause at any point, pass a number of milliseconds to `steps` prop to pause.\n\n```tsx\nimport React from 'react'\nimport { ReactTypical } from '@deadcoder0904/react-typical'\n\nconst Index = () =\u003e (\n\t\u003cReactTypical\n\t\tsteps={['Hello', 1000, 'React Typical', 2000]}\n\t\twrapper=\"p\"\n\t/\u003e\n)\n```\n\n### Looping\n\nIn order to loop, just pass a number to `loop` prop, for example, if you want to loop 3 times.\n\n```tsx\nimport React from 'react'\nimport { ReactTypical } from '@deadcoder0904/react-typical'\n\nconst Index = () =\u003e (\n\t\u003cReactTypical\n\t\tsteps={['Hello', 1000, 'React Typical', 2000]}\n\t\tloop={3}\n\t\twrapper=\"p\"\n\t/\u003e\n)\n```\n\nOr pass `Infinity` to loop infinitely.\n\n```tsx\nimport React from 'react'\nimport { ReactTypical } from '@deadcoder0904/react-typical'\n\nconst Index = () =\u003e (\n\t\u003cReactTypical\n\t\tsteps={['Hello', 1000, 'React Typical', 2000]}\n\t\tloop={Infinity}\n\t\twrapper=\"p\"\n\t/\u003e\n)\n```\n\n### Default styles\n\nGet the blinking cursor effect by importing `dist/styles.min.css` as follows:\n\n```tsx\nimport '@deadcoder0904/react-typical/dist/styles.min.css'\n```\n\n## API\n\n| property  | required | type   | example                                 |\n| --------- | -------- | ------ | --------------------------------------- |\n| `steps`   | yes      | []     | `['Hello', 1000, 'React Typical', 500]` |\n| `wrapper` | no       | string | `'p'` or `'div'`                        |\n| `loop`    | no       | number | `3` or `Infinity`                       |\n\n## Motivation \u0026 Inspiration\n\nI wanted to use a typist library in React with TypeScript but couldn't find any. I found out there was a React Typist library known as [React Typical](https://github.com/catalinmiron/react-typical/) which used [@camwiegert/typical](https://github.com/camwiegert/typical) but both libraries weren't written in TypeScript. So I made this library which just uses the exact same code but in TypeScript \u0026 it was too much hassle to convert it into TypeScript. 10/10 wouldn't recommend.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeadcoder0904%2Freact-typical","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdeadcoder0904%2Freact-typical","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeadcoder0904%2Freact-typical/lists"}