react-point

react-point

react-point is a small, focused click/tap component for React.

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

$ npm install --save react-point

Then with a module bundler like webpack, use as you would anything else:

// using an ES6 transpiler, like babel
import PointTarget from 'react-point'

// not using an ES6 transpiler
var PointTarget = require('react-point')

The UMD build is also available on npmcdn:

<script src="https://npmcdn.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).

That's it :) Enjoy!