react-point [![Travis][build-badge]][build] [![npm package][npm-badge]][npm]

[build-badge]: https://img.shields.io/travis/ReactTraining/react-point/master.svg?style=flat-square
[build]: https://travis-ci.org/ReactTraining/react-point

[npm-badge]: https://img.shields.io/npm/v/react-point.svg?style=flat-square
[npm]: https://www.npmjs.org/package/react-point

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

A 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:

``js
// using ES6 modules
import PointTarget from 'react-point'

// using CommonJS modules
var PointTarget = require('react-point')
`

The UMD build is also available on unpkg:

`html

`

You can find the library on window.ReactPoint.

Usage

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

`js
import React from 'react'
import PointTarget from 'react-point'

class App extends React.Component {
handlePoint = () => {
alert('I was clicked or tapped!')
}

render() {
return (

)
}
}
`

By default, a renders a for accessibility. However, you can use the children prop to make it render something else. For example, to render a

:

`js
import React from 'react'
import PointTarget from 'react-point'

class App extends React.Component {
handlePoint = () => {
alert('I was clicked or tapped!')
}

render() {
return (



Click or tap here



)
}
}
`

Note: The onClick, onTouchStart, onTouchMove, onTouchEnd, and onTouchCancel props will be overwritten because ` 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!

Show more