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

| prop | type | default | description | |-----------------|---------|---------|-------------------------------------------------| | withHighlight | bool | true | enable css class add/remove on touch | | highlightDelay | number | 100 | time before adding touched class | | options | object | | hammer.js options | | onTap | func | | see https://github.com/JedWatson/react-hammerjs | | onDoubleTap | func | | see https://github.com/JedWatson/react-hammerjs | | onPan | func | | see https://github.com/JedWatson/react-hammerjs | | onSwipe | func | | see https://github.com/JedWatson/react-hammerjs | | onPress | func | | see https://github.com/JedWatson/react-hammerjs | | onPinch | func | | see https://github.com/JedWatson/react-hammerjs | | onRotate | func | | see https://github.com/JedWatson/react-hammerjs | | stopPropagation | boolean | true | call stopPropagation | | component | string | div | wrap 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 *.github.io/`.
• 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.