{"id":21937631,"url":"https://github.com/cap32/react-pan-responder","last_synced_at":"2025-07-08T18:08:53.257Z","repository":{"id":88318835,"uuid":"96628262","full_name":"Cap32/react-pan-responder","owner":"Cap32","description":"🤞 React low level pan gesture component for DOM","archived":false,"fork":false,"pushed_at":"2018-07-31T09:01:49.000Z","size":826,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-28T05:04:32.883Z","etag":null,"topics":["dom","gesture","pan-gesture","react","responder","responder-lifecycle","touch","touch-events"],"latest_commit_sha":null,"homepage":"https://cap32.github.io/react-pan-responder/","language":"JavaScript","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/Cap32.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2017-07-08T15:45:10.000Z","updated_at":"2023-03-04T05:34:31.000Z","dependencies_parsed_at":null,"dependency_job_id":"282fbd3e-8111-422e-8ba1-63f7b19fdc5c","html_url":"https://github.com/Cap32/react-pan-responder","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Cap32/react-pan-responder","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cap32%2Freact-pan-responder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cap32%2Freact-pan-responder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cap32%2Freact-pan-responder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cap32%2Freact-pan-responder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Cap32","download_url":"https://codeload.github.com/Cap32/react-pan-responder/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cap32%2Freact-pan-responder/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264321048,"owners_count":23590575,"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":["dom","gesture","pan-gesture","react","responder","responder-lifecycle","touch","touch-events"],"created_at":"2024-11-29T01:20:53.901Z","updated_at":"2025-07-08T18:08:53.253Z","avatar_url":"https://github.com/Cap32.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-pan-responder\n\n[![Build Status](https://travis-ci.org/Cap32/react-pan-responder.svg?branch=master)](https://travis-ci.org/Cap32/react-pan-responder) [![Coverage Status](https://coveralls.io/repos/github/Cap32/react-pan-responder/badge.svg?branch=master)](https://coveralls.io/github/Cap32/react-pan-responder?branch=master) [![License](https://img.shields.io/badge/license-MIT_License-blue.svg?style=flat)](https://github.com/Cap32/react-pan-responder/blob/master/LICENSE.md)\n\nLow level pan gesture responder React component for DOM. This library is highly inspired by [React Native PanResponder](http://facebook.github.io/react-native/docs/panresponder.html).\n\n## Table of Contents\n\n- [Table of Contents](#table-of-contents)\n- [Features](#features)\n- [Getting Started](#getting-started)\n  - [Installation](#installation)\n  - [Example](#example)\n  - [Demo](#demo)\n- [Responder Lifecycle](#responder-lifecycle)\n- [Responder Handlers](#responder-handlers)\n  - [Event](#event)\n  - [GestureState](#gesturestate)\n- [Properties](#properties)\n  - [onStartShouldSet](#onstartshouldset)\n  - [onStartShouldSetCapture](#onstartshouldsetcapture)\n  - [onMoveShouldSet](#onmoveshouldset)\n  - [onMoveShouldSetCapture](#onmoveshouldsetcapture)\n  - [onGrant](#ongrant)\n  - [onReject](#onreject)\n  - [onStart](#onstart)\n  - [onMove](#onmove)\n  - [onEnd](#onend)\n  - [onRelease](#onrelease)\n  - [onTerminationRequest](#onterminationrequest)\n  - [onTerminate](#onterminate)\n  - [touchAction](#touchaction)\n  - [innerRef](#innerref)\n- [License](#license)\n\n\n## Features\n\n- Provides `gestureState` helper object\n- Reconciles several touches into a single gesture\n- Reconciles move and end events outside target element\n- Compatible with mouse event\n\n\n## Getting Started\n\n### Installation\n\n```bash\n$ yarn add @cantonjs/react-pan-responder\n```\n\n\n### Example\n\n```js\nimport React, { Component } from 'react';\nimport PanResponder from '@cantonjs/react-pan-responder';\n\nexport default class MyApp extends Component {\n  render() {\n    \u003cPanResponder\n      onStartShouldSet={(event, gestureState) =\u003e true}\n      onGrant={(event, gestureState) =\u003e {}}\n      onMove={(event, gestureState) =\u003e {}}\n      onRelease={(event, gestureState) =\u003e {}}\n    \u003e\n      {(ref) =\u003e\n        \u003cdiv ref={ref}\u003eAwesome\u003c/div\u003e\n      }\n    \u003c/PanResponder\u003e\n  }\n}\n```\n\n### Demo\n\n[https://cap32.github.io/react-pan-responder/](https://cap32.github.io/react-pan-responder/)\n\n\n## Responder Lifecycle\n\nA view can become the touch responder by implementing the correct negotiation methods. There are two methods to ask the view if it wants to become responder:\n\n* `View.props.onStartShouldSet: (event, gestureState) =\u003e true`, - Does this view want to become responder on the start of a touch?\n* `View.props.onMoveShouldSet: (event, gestureState) =\u003e true`, - Called for every touch move on the View when it is not the responder: does this view want to \"claim\" touch responsiveness?\n\nIf the View returns true and attempts to become the responder, one of the following will happen:\n\n* `View.props.onGrant: (event, gestureState) =\u003e {}` - The View is now responding for touch events. This is the time to highlight and show the user what is happening\n* `View.props.onReject: (event, gestureState) =\u003e {}`  - Something else is the responder right now and will not release it\n\nIf the view is responding, the following handlers can be called:\n\n* `View.props.onMove: (event, gestureState) =\u003e {}` - The user is moving their finger\n* `View.props.onRelease: (event, gestureState) =\u003e {}` - Fired at the end of the touch, i.e. \"touchUp\"\n* `View.props.onTerminationRequest: (event, gestureState) =\u003e true` - Something else wants to become responder. Should this view release the responder? Returning `true` allows release\n* `View.props.onTerminate: (event, gestureState) =\u003e {}` - The responder has been taken by other views after a call to `onTerminationRequest`\n\n\n## Responder Handlers\n\nIt provides a predictable wrapper of the responder handlers provided by the gesture responder system. For each handler, it provides a new `gestureState` object alongside the native event object:\n\n```js\nonMove: (event, gestureState) =\u003e {}\n```\n\n### Event\n\nThe native event that binding to `window` object. **This is NOT a [Synthetic Event](https://facebook.github.io/react/docs/events.html)**\n\n### GestureState\n\nA gestureState object has the following:\n\n* stateID - ID of the gestureState- persisted as long as there at least one touch on screen\n* moveX - the latest screen coordinates of the recently-moved touch\n* moveY - the latest screen coordinates of the recently-moved touch\n* x0 - the screen coordinates of the responder grant\n* y0 - the screen coordinates of the responder grant\n* dx - accumulated distance of the gesture since the touch started\n* dy - accumulated distance of the gesture since the touch started\n* vx - current velocity of the gesture\n* vy - current velocity of the gesture\n* numberActiveTouches - Number of touches currently on screen\n\n\n## Properties\n\n*All properties are optional*\n\n### onStartShouldSet\n\n`boolean|function`\n\nDeciding this component to become responder on the start of a touch. Defaults to `false`. If giving a function, it should return a `boolean`.\n\n\n### onStartShouldSetCapture\n\n`boolean|function`\n\nJust like `onStartShouldSet`, but using capture. Defaults to `false`.\n\n\n### onMoveShouldSet\n\n`boolean|function`\n\nDeciding this component to become responder on every touch move on the View when it is not the responder. Defaults to `false`.\n\n\n### onMoveShouldSetCapture\n\n`boolean|function`\n\nJust like `onMoveShouldSet`, but using capture. Defaults to `false`.\n\n\n### onGrant\n\n`function`\n\nFired when this component is now responding for touch events. This is the time to highlight and show the user what is happening.\n\n### onReject\n\n`function`\n\nFired when something else is the responder right now and will not release it\n\n\n### onStart\n\n`function`\n\nFired for every touch start when it is the responder.\n\n\n### onMove\n\n`function`\n\nFired for every touch move when it is the responder.\n\n\n### onEnd\n\n`function`\n\nFired for every touch end when it is the responder.\n\n\n### onRelease\n\n`function`\n\nFired at the end of the touch, i.e. \"touchUp\".\n\n### onTerminationRequest\n\n`boolean|function`\n\nFired when something else wants to become responder. Should this view release the responder? Returning `true` allows release.\n\n### onTerminate\n\n`function`\n\nFired when responder has been taken by other views after a call to `onTerminationRequest`.\n\n### touchAction\n\n`string`\n\nDefining responder panning action. The value could be one of following string:\n\n- `none`: Disable browser handling of all panning gestures (default).\n- `x`: Enable single-finger horizontal panning gestures for browser handling.\n- `y`: Enable single-finger vertical panning gestures for browser handling.\n\n### innerRef\n\n`function`\n\nUse this to access the internal component ref.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcap32%2Freact-pan-responder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcap32%2Freact-pan-responder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcap32%2Freact-pan-responder/lists"}