react-point
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).
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!