s10d-touchable

Cross-platform touch component for ReactJS

Demonstration

Usage examples

TAP (0)
DBLTAP (0)

Documentation

npm version Dependency Status

s10d-touchable

Cross platform Touch component for ReactJS

Features

  • Use native touchstart/touchend event for taps and fallbacks to hammer.js if not available
  • Fallback to click on non-touch devices
  • Add a touched css class when touching element

Basic Usage

<Touchable onTap={ () => alert('tap') }>Tap me</Touchable>
<Touchable onTap={ () => alert('double tap') }>Double tap me</Touchable>

API

proptypedefaultdescription
withHighlightbooltrueenable css class add/remove on touch
highlightDelaynumber100time before adding touched class
optionsobjecthammer.js options
onTapfuncsee https://github.com/JedWatson/react-hammerjs
onDoubleTapfuncsee https://github.com/JedWatson/react-hammerjs
onPanfuncsee https://github.com/JedWatson/react-hammerjs
onSwipefuncsee https://github.com/JedWatson/react-hammerjs
onPressfuncsee https://github.com/JedWatson/react-hammerjs
onPinchfuncsee https://github.com/JedWatson/react-hammerjs
onRotatefuncsee https://github.com/JedWatson/react-hammerjs
stopPropagationbooleantruecall stopPropagation
componentstringdivwrap children using that component

License

s10d-touchable is available under MIT. See LICENSE for more details.

Dev

Common Tasks

Based on https://github.com/survivejs/react-component-boilerplate

  • Developing - npm start - Runs the development server at localhost:8080 and use Hot Module Replacement. You can override the default host and port through env (HOST, PORT).
  • Creating a version - npm version <x.y.z> - Updates /dist and package.json with the new version and create a version tag to Git.
  • Publishing a version - npm publish - Pushes a new version to npm and updates the project site.
  • Running tests once - npm test
  • Running tests continuously npm run test:tdd
  • Linting - npm run test:lint - Runs ESLint.
  • Building - npm run gh-pages - Builds the demo into ./gh-pages directory.
  • Deploying - npm run deploy-gh-pages - Deploys the contents of ./gh-pages to the gh-pages branch. GitHub will pick this up automatically. Your site will be available through *<user name>.github.io/<project name>`.
  • Generating stats - npm run stats - Generates stats that can be passed to webpack analyse tool. This is useful for investigating what the build consists of.