{"id":13450916,"url":"https://github.com/KATT/use-is-typing","last_synced_at":"2025-03-23T16:32:44.555Z","repository":{"id":55561634,"uuid":"252749497","full_name":"KATT/use-is-typing","owner":"KATT","description":"… React Hook for typing indicator","archived":true,"fork":false,"pushed_at":"2020-12-22T01:10:31.000Z","size":374,"stargazers_count":9,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-04-18T13:32:06.811Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/use-is-typing-jz5i6","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/KATT.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-04-03T14:03:27.000Z","updated_at":"2022-12-19T21:06:08.000Z","dependencies_parsed_at":"2022-08-15T03:11:05.231Z","dependency_job_id":null,"html_url":"https://github.com/KATT/use-is-typing","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KATT%2Fuse-is-typing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KATT%2Fuse-is-typing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KATT%2Fuse-is-typing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KATT%2Fuse-is-typing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KATT","download_url":"https://codeload.github.com/KATT/use-is-typing/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":213324789,"owners_count":15570181,"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":[],"created_at":"2024-07-31T07:00:40.190Z","updated_at":"2024-07-31T07:01:56.257Z","avatar_url":"https://github.com/KATT.png","language":"TypeScript","funding_links":[],"categories":["Packages"],"sub_categories":[],"readme":"# `use-is-typing` \u003cimg src=\"https://raw.githubusercontent.com/KATT/use-is-typing/master/typing-indicator.gif\" width=\"50\"\u003e\n\nSee if someone is typing into an input or textarea.\n\n## Install\n\n```sh\nyarn add use-is-typing\n```\n\n```\nnpm i use-is-typing --save\n```\n\n## Example\n\n- See more examples [`./storybook`](./stories/useIsTyping.stories.tsx)\n- [Try it at CodeSandbox](https://codesandbox.io/s/use-is-typing-jz5i6)\n\n### Basic\n\n```tsx\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { useIsTyping } from 'use-is-typing';\n\nconst App = () =\u003e {\n  const [isTyping, register] = useIsTyping();\n\n  return (\n    \u003cdiv\u003e\n      \u003ctextarea ref={register} /\u003e\n      \u003cbr /\u003e\n      Typing? {isTyping ? '✅' : '❌'}\n    \u003c/div\u003e\n  );\n};\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById('root'));\n```\n\n### With [Material UI](https://material-ui.com/)\n\n```tsx\nexport const MaterialUITextField = () =\u003e {\n  const [isTyping, register] = useIsTyping();\n  return (\n    \u003cdiv\u003e\n      \u003cTextField label=\"Type something here\" inputRef={register} /\u003e\n      \u003cBox mb={2} /\u003e\n      \u003cTypography variant=\"body1\"\u003e\n        Typing? {isTyping ? '✅' : '❌'}\n      \u003c/Typography\u003e\n    \u003c/div\u003e\n  )\n};\n```\n\n### Customize timeout\n\nBy default, the typing indicator is set to `false` after 1000ms, this can be changed:\n\n```tsx\nconst [isTyping, register] = useIsTyping({ timeout: 300 }); // timeout after 300ms\n```\n\n\n\n## Contributing\n\nThis project was bootstrapped with [TSDX](https://github.com/jaredpalmer/tsdx). See sections below for info on how to get it running.\n\n\n### Configuration\n\nCode quality is [set up for you](https://github.com/palmerhq/tsdx/pull/45/files) with `prettier`, `husky`, and `lint-staged`. Adjust the respective fields in `package.json` accordingly.\n\n\n### Commands\n\nTSDX scaffolds your new library inside `/src`, and also sets up a [Parcel-based](https://parceljs.org) playground for it inside `/example`.\n\nThe recommended workflow is to run TSDX in one terminal:\n\n```\nnpm start # or yarn start\n```\n\nThis builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`.\n\nThen run either example playground or storybook:\n\n#### Storybook\n\nRun inside another terminal:\n\n```\nyarn storybook\n```\n\nThis loads the stories from `./stories`.\n\n\u003e NOTE: Stories should reference the components as if using the library, similar to the example playground. This means importing from the root project directory. This has been aliased in the tsconfig and the storybook webpack config as a helper.\n\n#### Jest\n\nJest tests are set up to run with `npm test` or `yarn test`. This runs the test watcher (Jest) in an interactive mode. By default, runs tests related to files changed since the last commit.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKATT%2Fuse-is-typing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FKATT%2Fuse-is-typing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKATT%2Fuse-is-typing/lists"}