Never Play Matchmaker

    react-point

    3.0.1 • Public • Published

    react-point Travis npm package

    react-point gives you fast touch events for your React applications.

    A <PointTarget> normalizes click and click-like touch events (not swipes or drags) into a "point" event. This helps you avoid the 300ms delay for click events on touch interfaces like iOS.

    Installation

    Using yarn:

    $ yarn add react-point
    

    Then, use as you would anything else:

    // using ES6 modules
    import PointTarget from 'react-point'
     
    // using CommonJS modules
    var PointTarget = require('react-point')

    The UMD build is also available on unpkg:

    <script src="https://unpkg.com/react-point/umd/react-point.min.js"></script>

    You can find the library on window.ReactPoint.

    Usage

    Just render a <PointTarget> component and give it an onPoint function to call whenever the user clicks or taps the element.

    import React from 'react'
    import PointTarget from 'react-point'
     
    class App extends React.Component {
      handlePoint = () => {
        alert('I was clicked or tapped!')
      }
     
      render() {
        return (
          <PointTarget onPoint={this.handlePoint}/>
        )
      }
    }

    By default, a <PointTarget> renders a <button> for accessibility. However, you can use the children prop to make it render something else. For example, to render a <div>:

    import React from 'react'
    import PointTarget from 'react-point'
     
    class App extends React.Component {
      handlePoint = () => {
        alert('I was clicked or tapped!')
      }
     
      render() {
        return (
          <PointTarget onPoint={this.handlePoint}>
            <div>Click or tap here</div>
          </PointTarget>
        )
      }
    }

    Note: The onClick, onTouchStart, onTouchMove, onTouchEnd, and onTouchCancel props will be overwritten because <PointTarget> needs them to do its thing).

    Enjoy!

    About

    react-point is developed and maintained by React Training. If you're interested in learning more about what React can do for your company, please get in touch! "hat's it :) Enjoy!

    Install

    npm i react-point

    DownloadsWeekly Downloads

    845

    Version

    3.0.1

    License

    MIT

    Last publish

    Collaborators

    • mjackson