A LongPress component for React

LongPress.js

import {React, Component} from 'react';

class LongPress extends Component {
  shouldShortPress = true;

  componentDidMount() {
    this.listenForTouch();
  }

  componentWillUnmount() {
    this.stopListening();
  }

  startInterval = () => {
    this.timeout = setTimeout(this.longPressed, this.props.time);
  };

  longPressed = () => {
    this.shouldShortPress = false;

    if (this.props.onLongPress) {
      this.props.onLongPress();
      this.cancelInterval();
    }
  };

  cancelInterval = () => {
    clearTimeout(this.timeout);
    if (this.props.onPress && this.shouldShortPress) {
      this.props.onPress();
    }
  };

  setRef = ref => (this.ref = ref);

  listenForTouch = () => {
    if (this.ref) {
      this.listenerStart = this.ref.addEventListener('touchstart', e => {
        e.preventDefault();
        this.shouldShortPress = true;
        this.startInterval();
      });
      this.listenerEnd = this.ref.addEventListener('touchend', e => {
        e.preventDefault();
        this.cancelInterval();
      });
    }
  };

  stopListening = () => {
    this.ref.removeEventListener('touchstart', this.listenerStart);
    this.ref.removeEventListener('touchend', this.listenerEnd);
  };

  render() {
    return this.props.render(this.setRef);
  }
}

export default LongPress;