react hold listener wrapper usage <HoldListener onHold={this.handleHold}><Card /></HoldListener>

holdListener.js

import React from 'react'

class HoldListener extends React.Component {
  constructor() {
    super();
  }

  handleMouseDown() {
    this.timeout = setTimeout(this.props.onHold, this.props.threshold);
  }

  handleMouseUp() {
    clearTimeout(this.timeout);
  }

  componentDidMount() {
    document.addEventListener('mouseup', this.handleMouseUp.bind(this));
  }

  componentWillUnmount() {
    document.removeEventListener('mouseup', this.handleMouseUp.bind(this));
  }

  render(){
    let props = _.omit(this.props, 'children');

    return React.cloneElement(this.props.children, _.merge(props, {
      onMouseDown: this.handleMouseDown.bind(this)
    }));
  }
}

HoldListener.propTypes = {
  onHold: React.PropTypes.func.isRequired,
  children: React.PropTypes.object.isRequired,
  threshold: React.PropTypes.number
};

HoldListener.defaultProps = {
  threshold: 600
};

export default HoldListener;