Wondering what’s next for npm?Check out our public roadmap! »

    s10d-touchable

    1.0.1 • Public • Published

    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

    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.

    Install

    npm i s10d-touchable

    DownloadsWeekly Downloads

    1

    Version

    1.0.1

    License

    MIT

    Last publish

    Collaborators

    • avatar