Higher Order Component that wraps any clickable element, allowing for a "bounce" animation on click or touch.

BouncePress.jsx

import React, { PropTypes, Component } from 'react';


class BouncePress extends Component {
	constructor(props) {
		super(props);
		this.bouncePressElem = null;
	}
	addBouncePressRef = (e) => {
		this.bouncePressElem = e;
	}
	handleMouseDown = (ev) => {
		// Only Run if Component is not disabled
		if(this.props.disabled === false)
			this.bouncePressElem.classList.add('pressed');
	}
	handleMouseUp = (ev) => {
		// Only Run if Component is not disabled
		if(this.props.disabled === false)
			this.bouncePressElem.classList.remove('pressed');
	}

	render() {
		return(
			<span onTouchStart={this.handleMouseDown} onTouchEnd={this.handleMouseUp} onTouchCancel={this.handleMouseUp}
			      onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp} onMouseLeave={this.handleMouseUp}
			      ref={this.addBouncePressRef} className="bouncePress" {...this.props}>
				{this.props.children}
			</span>
		)
	}
}

BouncePressWrapper.propTypes = {
	disabled: PropTypes.bool,
};

BouncePressWrapper.defaultProps = {
	disabled: false,
};


export default BouncePressWrapper;

Consuming-pseudo-function.jsx

// Code from a Multi Button Selector Component

<BouncePress key={useOptionName} disabled={this.props.disabled}>
  <button className="optionBlock" name={useOptionName}
          ref={option.id} disabled={this.props.disabled}
          onClickCapture={this.handleUpdateInput(option.id)}>
    <div className="optionBlock-content">
      {option.img
        ? <ImageLoad src={option.img.src} alt={option.img.alt} animate="bounce"
                     dataType="svg" className="optionBlock-content--img"/>
        : null}
      <p>{useOptionName}</p>
      <p className="optionBlock-content--hint">{option.hint}</p>
    </div>
  </button>
</BouncePress>