{"id":28313328,"url":"https://github.com/turkyden/react-typing-hook","last_synced_at":"2026-05-02T10:39:46.593Z","repository":{"id":57346851,"uuid":"310225638","full_name":"turkyden/react-typing-hook","owner":"turkyden","description":"Animated typing in ~400 bytes 🐡 of React Hook.","archived":false,"fork":false,"pushed_at":"2020-11-22T15:58:00.000Z","size":4658,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-05-02T10:39:27.420Z","etag":null,"topics":["entering","hooks","key-in","react","typical","typing","typinganimation","typist"],"latest_commit_sha":null,"homepage":"https://turkyden.github.io/react-typing-hook/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/turkyden.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-11-05T07:49:57.000Z","updated_at":"2021-03-24T05:52:55.000Z","dependencies_parsed_at":"2022-08-25T19:40:44.582Z","dependency_job_id":null,"html_url":"https://github.com/turkyden/react-typing-hook","commit_stats":null,"previous_names":[],"tags_count":36,"template":false,"template_full_name":null,"purl":"pkg:github/turkyden/react-typing-hook","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/turkyden%2Freact-typing-hook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/turkyden%2Freact-typing-hook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/turkyden%2Freact-typing-hook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/turkyden%2Freact-typing-hook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/turkyden","download_url":"https://codeload.github.com/turkyden/react-typing-hook/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/turkyden%2Freact-typing-hook/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32531742,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-02T01:12:54.858Z","status":"online","status_checked_at":"2026-05-02T02:00:05.923Z","response_time":132,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["entering","hooks","key-in","react","typical","typing","typinganimation","typist"],"created_at":"2025-05-24T18:10:39.470Z","updated_at":"2026-05-02T10:39:46.573Z","avatar_url":"https://github.com/turkyden.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-typing-hook\n\nAnimated typing in ~2.6 kb 🐡 with React Hook.\n\n![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)\n[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)\n![GitHub](https://img.shields.io/github/license/Turkyden/react--typing--hook)\n![GitHub Workflow Status (branch)](https://img.shields.io/github/workflow/status/Turkyden/react--typing-hook/REACT_TYPING_HOOK_BUILD/master)\n\n[Preview in CodeSandBox \u0026rarr;](https://codesandbox.io/s/react-typing-hook-5uv7j)\n\n## Install\n\n```yarn\nyarn add react-typing-hook\n```\n\nor\n\n```yarn\nnpm install react-typing-hook\n```\n\n## Usage\n\nType some animate text on the web.\n\n```tsx\nimport useTyping from 'react-typing-hook'\n\nfunction App() {\n\n  const ref = React.useRef(null);\n  \n  useTyping(ref, {\n    steps: ['Hello', 1000, 'Hello world!', 500],\n    loop: Infinity,\n    speed: 60\n  })\n  \n  return \u003cp ref={ref}\u003e\u003c/p\u003e\n  // \u003cp\u003eHello\u003c/p\u003e\n  // ... 1000ms\n  // \u003cp\u003eHello Hello\u003c/p\u003e\n  // ... 500ms\n  // \u003cp\u003eHello\u003c/p\u003e\n}\n```\n\n## API\n\n| Name | Type | Default | Description |\n| ---- | ----- | :----: | --- |\n| ref | `React.RefObject\u003cHTMLDocument\u003e` | - | The ref of typical text wraper |\n| steps | `Array\u003cstring, number, Function\u003e` | - | Step array assign to the typing |\n| loop | `number` | 1 | The number of loop typing animation effect, **Infinity** |\n| speed | `number` | 60 | The speed of typing animation effect |\n\nAdd the classname on the dom.\n\n```html\n\u003cp ref={ref} className=\"typingWrapper\"\u003e\u003c/p\u003e\n```\n\nSuch as a blink cursor style like this.\n\n```css\n.typingWrapper::after {\n  content: \"|\";\n  animation: blink 1s infinite step-start;\n}\n\n@keyframes blink {\n  50% { opacity: 0; }\n}\n```\n\n## Contributing\n\n```yarn\nyarn install\n```\n\nCompiles and hot-reloads for development\n\n```yarn\nyarn start\n```\n\nCompiles and minifies for production\n\n```yarn\nyarn build\n```\n\n## LICENSE\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fturkyden%2Freact-typing-hook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fturkyden%2Freact-typing-hook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fturkyden%2Freact-typing-hook/lists"}