react-touchable-hoc ·

A higher-order component to turn any component or element into touchable, provides 11 props: onTap, onDoubleTap, onLongTap, onSwipe, onSwipeUp, onSwipeRight, onSwipeDown, onSwipeLeft, onMoveStart, onMove and onMoveEnd.

The onMove and onMoveEnd will be injected with two params. The first param is move-start coordinate {x, y}, and the second param is move-end coordinate {x, y}.

Online Examples | Examples Code

Install

npm install react-touchable-hoc --save

Usage

Usage as Component

import React, { PureComponent }
import Touchable from 'react-touchable-hoc'

class App extends PureComponent {
  render () {
    return (
      <Touchable
        onTap={() => console.log('TAP')}
      >
        <div>touchable</div>
      </Touchable>
    )
  }
}

Usage as HOC

import React, { PureComponent }
import { touchable } from 'react-touchable-hoc'

@touchable
class CustomTouchable extends PureComponent {
  render () {
    // Must pass through the rest props.
    return (
      <div {...this.props}>touchable</div>
    )
  }
}

class App extends PureComponent {
  render () {
    return (
      <CustomTouchable
        onTap={() => console.log('TAP')}
      />
    )
  }
}

Licence

MIT.