{"id":22497492,"url":"https://github.com/kxxt/react-typed-component","last_synced_at":"2026-04-14T23:31:12.686Z","repository":{"id":40668870,"uuid":"459370135","full_name":"kxxt/react-typed-component","owner":"kxxt","description":"A react wrapper for typed.js. Maintained fork of https://github.com/ssbeefeater/react-typed","archived":false,"fork":false,"pushed_at":"2023-05-27T02:31:01.000Z","size":8146,"stargazers_count":1,"open_issues_count":6,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-20T05:36:46.750Z","etag":null,"topics":["react","react-typed","typed-js"],"latest_commit_sha":null,"homepage":"http://kxxt.github.io/react-typed-component","language":"JavaScript","has_issues":false,"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/kxxt.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-02-15T00:17:54.000Z","updated_at":"2023-05-27T01:32:57.000Z","dependencies_parsed_at":"2024-12-06T20:24:50.913Z","dependency_job_id":"11819e96-0e48-4b5d-8e25-febbcb467520","html_url":"https://github.com/kxxt/react-typed-component","commit_stats":{"total_commits":127,"total_committers":5,"mean_commits":25.4,"dds":0.5354330708661417,"last_synced_commit":"5a265c48e9520474168a72c8b85d6f10d0b40202"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/kxxt/react-typed-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kxxt%2Freact-typed-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kxxt%2Freact-typed-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kxxt%2Freact-typed-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kxxt%2Freact-typed-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kxxt","download_url":"https://codeload.github.com/kxxt/react-typed-component/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kxxt%2Freact-typed-component/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31819715,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-14T18:05:02.291Z","status":"ssl_error","status_checked_at":"2026-04-14T18:05:01.765Z","response_time":153,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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-typed","typed-js"],"created_at":"2024-12-06T20:24:38.136Z","updated_at":"2026-04-14T23:31:12.669Z","avatar_url":"https://github.com/kxxt.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-typed-component\n\n[![GitHub issues](https://img.shields.io/github/issues/kxxt/react-typed-component)](https://github.com/kxxt/react-typed-component/issues)\n[![GitHub forks](https://img.shields.io/github/forks/kxxt/react-typed-component)](https://github.com/kxxt/react-typed-component/network)\n[![GitHub stars](https://img.shields.io/github/stars/kxxt/react-typed-component)](https://github.com/kxxt/react-typed-component/stargazers)\n[![GitHub license](https://img.shields.io/github/license/kxxt/react-typed-component)](https://github.com/kxxt/react-typed-component/blob/master/LICENSE)\n\nA react wrapper for [typed.js](https://github.com/mattboldt/typed.js)\n\nThis is a maintained fork of [react-typed](https://github.com/ssbeefeater/react-typed). \n\nI'm quite new to maintain a npm package. If there are bugs, please open an issue in this repo.\n\nLive demo (Storybook): https://kxxt.github.io/react-typed-component\n\n## Installation\n\nInstall with [yarn](https://yarnpkg.com) or [npm](https://www.npmjs.com/)\n\n```sh\nyarn add react-typed-component\n        #or\nnpm i react-typed-component\n```\n\n## Examples\n\n### A basic example\n\n```jsx\nimport ReactTyped from \"react-typed-component\";\n\nconst MyComponent = () =\u003e (\n  \u003cdiv\u003e\n    \u003cReactTyped strings={[\"Here you can find anything\"]} typeSpeed={40} /\u003e\n    \u003cbr /\u003e\n\n    \u003cReactTyped\n      strings={[\n          \"Search for products\",\n          \"Search for categories\",\n          \"Search for brands\",\n      ]}\n      typeSpeed={40}\n      backSpeed={50}\n      attr=\"placeholder\"\n      loop\n      \u003e\n        \u003cinput type=\"text\" /\u003e\n      \u003c/ReactTyped\u003e\n  \u003c/div\u003e\n);\n```\n\n### Using typed start, stop, toggle, destroy, reset functions\n\n```jsx\nimport ReactTyped from \"react-typed-component\";\n\nconst MyComponent = () =\u003e {\n  const typed = useRef(null);\n  return (\u003cdiv\u003e\n    \u003cbutton onClick={() =\u003e typed.current.start()}\u003eStart\u003c/button\u003e\n    \u003cbutton onClick={() =\u003e typed.current.stop()}\u003eStop\u003c/button\u003e\n    \u003cbutton onClick={() =\u003e typed.current.toggle()}\u003eToggle\u003c/button\u003e\n    \u003cbutton onClick={() =\u003e typed.current.destroy()}\u003eDestroy\u003c/button\u003e\n    \u003cbutton onClick={() =\u003e typed.current.reset()}\u003eReset\u003c/button\u003e\n    \u003cbr/\u003e\n    \u003cReactTyped\n        typedRef={typedI =\u003e {\n          typed.current = typedI;\n        }}\n        strings={[\"Here you can find hardware\", \"Here you can find software\", \"Here you can find net tools\",]}\n        typeSpeed={40}\n    /\u003e\n  \u003c/div\u003e);\n}\n```\n\nfor blinking cursor `import 'react-typed-component/dist/animatedCursor.css';`\n\n## Documentation\n\n`react-typed-component` supports all official options that you can find [here](http://www.mattboldt.com/typed.js/docs/).\nBut also supports some extra props:\n\n| propType          | required | default | description                                      |\n| ----------------- | -------- | ------- | ------------------------------------------------ |\n| style(object)     | no       | -       | styles for the outer element                     |\n| className(string) | no       | -       | class name for the outer element                 |\n| children(object)  | no       | -       | the element to wrap                              |\n| typedRef(func)    | no       | -       | typedRef(self: Typed) returns the Typed instance |\n| stopped(bool)     | no       | -       | initialize in stopped state                      |\n\n## Credits\n\nThanks to @ssbeefeater for creating the original [react-typed](https://github.com/ssbeefeater/react-typed).\n\nThanks to all contributers of [typed.js](https://github.com/mattboldt/typed.js).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkxxt%2Freact-typed-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkxxt%2Freact-typed-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkxxt%2Freact-typed-component/lists"}