npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@cantonjs/react-pan-responder

v0.1.1

Published

React low level pan gesture component for DOM

Downloads

7

Readme

react-pan-responder

Build Status Coverage Status License

Low level pan gesture responder React component for DOM. This library is highly inspired by React Native PanResponder.

Table of Contents

Features

  • Provides gestureState helper object
  • Reconciles several touches into a single gesture
  • Reconciles move and end events outside target element
  • Compatible with mouse event

Getting Started

Installation

$ yarn add @cantonjs/react-pan-responder

Example

import React, { Component } from 'react';
import PanResponder from '@cantonjs/react-pan-responder';

export default class MyApp extends Component {
  render() {
    <PanResponder
      onStartShouldSet={(event, gestureState) => true}
      onGrant={(event, gestureState) => {}}
      onMove={(event, gestureState) => {}}
      onRelease={(event, gestureState) => {}}
    >
      {(ref) =>
        <div ref={ref}>Awesome</div>
      }
    </PanResponder>
  }
}

Demo

https://cap32.github.io/react-pan-responder/

Responder Lifecycle

A 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:

  • View.props.onStartShouldSet: (event, gestureState) => true, - Does this view want to become responder on the start of a touch?
  • View.props.onMoveShouldSet: (event, gestureState) => true, - Called for every touch move on the View when it is not the responder: does this view want to "claim" touch responsiveness?

If the View returns true and attempts to become the responder, one of the following will happen:

  • View.props.onGrant: (event, gestureState) => {} - The View is now responding for touch events. This is the time to highlight and show the user what is happening
  • View.props.onReject: (event, gestureState) => {} - Something else is the responder right now and will not release it

If the view is responding, the following handlers can be called:

  • View.props.onMove: (event, gestureState) => {} - The user is moving their finger
  • View.props.onRelease: (event, gestureState) => {} - Fired at the end of the touch, i.e. "touchUp"
  • View.props.onTerminationRequest: (event, gestureState) => true - Something else wants to become responder. Should this view release the responder? Returning true allows release
  • View.props.onTerminate: (event, gestureState) => {} - The responder has been taken by other views after a call to onTerminationRequest

Responder Handlers

It 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:

onMove: (event, gestureState) => {}

Event

The native event that binding to window object. This is NOT a Synthetic Event

GestureState

A gestureState object has the following:

  • stateID - ID of the gestureState- persisted as long as there at least one touch on screen
  • moveX - the latest screen coordinates of the recently-moved touch
  • moveY - the latest screen coordinates of the recently-moved touch
  • x0 - the screen coordinates of the responder grant
  • y0 - the screen coordinates of the responder grant
  • dx - accumulated distance of the gesture since the touch started
  • dy - accumulated distance of the gesture since the touch started
  • vx - current velocity of the gesture
  • vy - current velocity of the gesture
  • numberActiveTouches - Number of touches currently on screen

Properties

All properties are optional

onStartShouldSet

boolean|function

Deciding this component to become responder on the start of a touch. Defaults to false. If giving a function, it should return a boolean.

onStartShouldSetCapture

boolean|function

Just like onStartShouldSet, but using capture. Defaults to false.

onMoveShouldSet

boolean|function

Deciding this component to become responder on every touch move on the View when it is not the responder. Defaults to false.

onMoveShouldSetCapture

boolean|function

Just like onMoveShouldSet, but using capture. Defaults to false.

onGrant

function

Fired when this component is now responding for touch events. This is the time to highlight and show the user what is happening.

onReject

function

Fired when something else is the responder right now and will not release it

onStart

function

Fired for every touch start when it is the responder.

onMove

function

Fired for every touch move when it is the responder.

onEnd

function

Fired for every touch end when it is the responder.

onRelease

function

Fired at the end of the touch, i.e. "touchUp".

onTerminationRequest

boolean|function

Fired when something else wants to become responder. Should this view release the responder? Returning true allows release.

onTerminate

function

Fired when responder has been taken by other views after a call to onTerminationRequest.

touchAction

string

Defining responder panning action. The value could be one of following string:

  • none: Disable browser handling of all panning gestures (default).
  • x: Enable single-finger horizontal panning gestures for browser handling.
  • y: Enable single-finger vertical panning gestures for browser handling.

innerRef

function

Use this to access the internal component ref.

License

MIT