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.

Using yarn:

$ yarn add react-point 

Then, use as you would anything else:

// using ES6 modulesimportPointTargetfrom'react-point'// using CommonJS modulesvarPointTarget=require('react-point')

The UMD build is also available on unpkg:

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

You can find the library on window.ReactPoint.

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

importReactfrom'react'importPointTargetfrom'react-point'classAppextendsReact.Component{handlePoint=()=>{alert('I was clicked or tapped!')}render(){return(<PointTargetonPoint={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>:

importReactfrom'react'importPointTargetfrom'react-point'classAppextendsReact.Component{handlePoint=()=>{alert('I was clicked or tapped!')}render(){return(<PointTargetonPoint={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).

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!