{"id":19422972,"url":"https://github.com/houfeng/react-finger","last_synced_at":"2025-08-13T14:18:14.363Z","repository":{"id":37323563,"uuid":"505144429","full_name":"Houfeng/react-finger","owner":"Houfeng","description":"👉 React Finger is a library of gesture events for React that allows developers to use a single set of events for both desktop and mobile devices.","archived":false,"fork":false,"pushed_at":"2024-11-26T05:58:20.000Z","size":3038,"stargazers_count":16,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-09T14:27:51.406Z","etag":null,"topics":["desktop","events","gesture","hammer","mobile","pinch","pinch-to-zoom","pointer","pointerevents","react","swipe","tap","touch","touchevent"],"latest_commit_sha":null,"homepage":"","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/Houfeng.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-06-19T15:14:29.000Z","updated_at":"2025-01-24T17:10:15.000Z","dependencies_parsed_at":"2024-06-20T21:59:15.593Z","dependency_job_id":"cce2cb95-e4b3-45a8-866a-0facbf96b727","html_url":"https://github.com/Houfeng/react-finger","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/Houfeng/react-finger","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Houfeng%2Freact-finger","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Houfeng%2Freact-finger/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Houfeng%2Freact-finger/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Houfeng%2Freact-finger/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Houfeng","download_url":"https://codeload.github.com/Houfeng/react-finger/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Houfeng%2Freact-finger/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270254404,"owners_count":24553040,"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","status":"online","status_checked_at":"2025-08-13T02:00:09.904Z","response_time":66,"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":["desktop","events","gesture","hammer","mobile","pinch","pinch-to-zoom","pointer","pointerevents","react","swipe","tap","touch","touchevent"],"created_at":"2024-11-10T13:36:21.236Z","updated_at":"2025-08-13T14:18:14.179Z","avatar_url":"https://github.com/Houfeng.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003cbr/\u003e\n  \u003cimg src=\"https://houfeng.net/react-finger/logo.png\" alt=\"React Finger\"\u003e\n\u003c/h1\u003e\n\nReact Finger is a library of gesture/shortcuts events for React that allows developers to use a single set of events for both desktop and mobile devices.\n\n# Install\n\n```\nnpm install react-finger --save\n```\n\n# Events\n\n**Gesture Events**  \n- **onTap**: Quickly tap the mouse or touch point\n- **onTapHold**: Hold for more than 600ms\n- **onDoubleTap**: Quick tap twice (within 300ms)\n- **onSwipe**: Swipe freely\n- **onSwipeUp**: Swipe up\n- **onSwipeRight**: Swipe right\n- **onSwipeDown**: Swipes down\n- **onSwipeLeft**: Swipe left\n- **onPinchStart**: Multi-finger gesture start (supports two-finger scale/move/rotate)\n- **onPinch**: Multi-finger gesture update (supports two-finger scale/move/rotate)\n- **onPinchEnd**: Multi-finger gesture end (supports two-finger scale/move/rotate)\n  \n**Basic Events**  \n- **onFingerDown**: Press the mouse or touch point\n- **onFingerMove**: Press \u0026 Moves the mouse or touch point\n- **onFingerUp**: Bounce the mouse or touch point\n- **onFingerCancel**: Cancels the mouse or touch point\n  \n**Shortcuts Events**  \n- **onShortcut**: When the shortcut key is pressed\n  \n**Host Events**  \n- **onPointerDown**: Press the mouse or touch point\n- **onPointerMove**: Moves the mouse or touch point\n- **onPointerUp**: Bounce the mouse or touch point\n- **onPointerCancel**: Cancels the mouse or touch point\n- **onKeyDown**: When the keyboard is pressed\n- **onKeyUp**: When the keyboard comes up\n  \n# Usage\n\n**Example 1:** Hello React Finger\n\n```jsx\nimport { Finger } from \"react-finger\";\n\nconst FingeredDiv = Finger(\"div\");\n\nfunction Demo(){\n  return (\n    \u003cFingeredDiv \n      onTap = { event=\u003econsole.log('onTap',event) }\n      onSwipe = { event=\u003econsole.log('onSwipe',event.direction) }\n    \u003e \n      Something...\n    \u003c/FingeredDiv\u003e\n  );\n}\n```\n\n**Example 2:** Using useFingerEvents\n\n```jsx\nimport { useFingerEvents } from \"react-finger\";\n\nfunction Demo(){\n  const events = useFingerEvents({\n    onTap: event=\u003econsole.log('onTap',event),\n    onSwipe: event=\u003econsole.log('onSwipe',event.direction),\n  });\n  return (\n    \u003cdiv {...events}\u003e Something... \u003c/div\u003e\n  );\n}\n```\n\n**Example 3:** Using createFingerEvents\n\n```jsx\nimport { createFingerEvents } from \"react-finger\";\n\nclass Demo extends Component {\n  events = createFingerEvents({\n    onTap: event=\u003econsole.log('onTap',event),\n    onSwipe: event=\u003econsole.log('onSwipe',event.direction),\n  });\n  render() {\n    return (\n      \u003cdiv {...this.events}\u003e Something... \u003c/div\u003e\n    );\n  }\n}\n```\n\n**Example 4:** Bound to the Document\n\n```jsx\nimport { FingerProxy } from \"react-finger\";\n\nfunction Demo(){\n  return (\n    \u003cFingerProxy \n      onTap = { event=\u003econsole.log('Tap on the document',event) }\n    /\u003e\n  );\n}\n```\n\n**Example 5:** Bound to the Boundary\n\n```jsx\nimport { FingerProxy, FingerProxyContainer } from \"react-finger\";\n\nconst YourBoundaryWrapper = FingerProxyContainer(\"div\");\n\nfunction Demo(){\n  return (\n    \u003cYourBoundaryWrapper\u003e\n      Something...\n      \u003cFingerProxy \n        onTap = { event=\u003econsole.log('Tap on the Boundary',event) }\n      /\u003e\n      Something...\n    \u003c/YourBoundaryWrapper\u003e\n  );\n}\n```\n\n**Example 6:** Binding shortcut keys\n\n```jsx\nimport { FingerProxy, FingerProxyContainer } from \"react-finger\";\n\nconst FingeredDiv = Finger(\"div\");\n\nfunction Demo(){\n  return (\n    \u003cFingeredDiv \n      onShortcut = { event =\u003e {\n        event.when(['control','shift','a'], ()=\u003e{\n          // Something...\n        });\n        event.when(['control','shift','b'], ()=\u003e{\n          // Something...\n        });\n      }}\n    /\u003e\n  );\n}\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoufeng%2Freact-finger","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhoufeng%2Freact-finger","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoufeng%2Freact-finger/lists"}