{"id":20014527,"url":"https://github.com/asplunds/tappify","last_synced_at":"2025-07-25T22:10:16.825Z","repository":{"id":47197031,"uuid":"313110219","full_name":"asplunds/tappify","owner":"asplunds","description":"A lightweight zero dependency React.js library to handle the client's pointer. Easily detect client cursor type and hide/show html or perform custom logic! Detect touch devices","archived":false,"fork":false,"pushed_at":"2021-09-09T11:48:42.000Z","size":19,"stargazers_count":6,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-08T11:44:04.374Z","etag":null,"topics":["cursor","detect","finger","mobile","pointer","react","react-component","tappify"],"latest_commit_sha":null,"homepage":"https://github.com/asplunds/tappify","language":"JavaScript","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/asplunds.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-15T19:47:36.000Z","updated_at":"2022-04-29T15:16:27.000Z","dependencies_parsed_at":"2022-08-03T03:15:51.761Z","dependency_job_id":null,"html_url":"https://github.com/asplunds/tappify","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asplunds%2Ftappify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asplunds%2Ftappify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asplunds%2Ftappify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asplunds%2Ftappify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/asplunds","download_url":"https://codeload.github.com/asplunds/tappify/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224413299,"owners_count":17306864,"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":["cursor","detect","finger","mobile","pointer","react","react-component","tappify"],"created_at":"2024-11-13T07:42:45.336Z","updated_at":"2024-11-13T07:42:45.991Z","avatar_url":"https://github.com/asplunds.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tappify.js\nA lightweight zero dependency [React.js](https://github.com/facebook/react) library to handle the client's pointer. Easily detect client cursor type and hide/show html or perform custom logic!\n\n\u003cimg align=\"right\" src=\"https://i.imgur.com/WObyHD5.gif\" width=\"400\"/\u003e\n\n## Install\n\n```shell\nnpm i tappify\n```\n\n## Getting started\n### Basic hide/show\n```jsx\nimport Tappify from \"tappify\";\n\nfunction myComponent() {\n  return \u003c\u003e\n    \u003cTappify.Finger\u003e\n      Client is using finger 👉 *tap tap*\n    \u003c/Tappify.Finger\u003e\n\n    \u003cTappify.Cursor\u003e\n      Client is using mouse cursor 🖱️ *click click*\n    \u003c/Tappify.Cursor\u003e\n  \u003c/\u003e\n}\n```\n### Get the current pointer type\n```js\nconst isCursor = Tappify.isCursor(); // will be true if the pointer is mouse cursor. False if it's finger\n```\n### Subscribe to pointer change\n```js\nconst unsubscribe = Tappify.subscribe(isCursor =\u003e {\n\n  if (isCursor) console.log(\"This client is now using a cursor\");\n  else console.log(\"This client is now using a touch screen\");\n  \n});\n\nunsubscribe(); // it's strongly recommended to unsubscribe when component unmounts to avoid memory leaks\n```\n## [Live demo](https://codesandbox.io/s/javascript-forked-gv8w4?file=/Demo.js)\n\n## Why Tappify?\nWith growing usage of touch screens on computer devices Tappify makes it seamless and easy to detect when user goes in or out of touch mode. In addition tappify provides an easy to use switch case scenario to handle different HTML elements depending on what pointer the client is using.\n\nTappify is completely event driven, that means no clocks/setintervals/requestAnimationFrame making it very preferment. It makes use of css's native @media condition to avoid any edge case bugs that JavaScript solutions might invoke.\n## How Tappify works\nTappify uses [@media pointer rule](https://developer.mozilla.org/en-US/docs/Web/CSS/@media) to determine the pointer type. If a pointer change is detected the pointerChange event will be dispatched on window and thereafter notifying subscribers and updating the `\u003cTappify.Cursor\u003e` and `\u003cTappify.Finger\u003e` components.\n## Found an issue?\nPlease open a new issue on the [Github repository](https://github.com/asplunds/tappify/issues)\n## Want to contribute?\nSimply create a new pull request on the pull requests tab.\n## Browser support\nTappify will work on all modern browsers. Tappify will __not__ work on IE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasplunds%2Ftappify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fasplunds%2Ftappify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasplunds%2Ftappify/lists"}