Touch preview

jsx.html

<!-- Pretend this is a JSX block -->
<div>
    <TouchPreview previewClassName="link--preview">
        <a href="/foo">
            Hello
        </a>
    </TouchPreview>
</div>

touch_preview.css

a {
    color: blue;
}

.link--preview a {
    color: red;
    text-decoration: underline;
}

touch_preview.js

TouchPreview = React.createClass({
  getDefaultProps: function() {
    return {
      previewClassName: "preview"
    };
  },
  getInitialState: function() {
    return {
      preview: false
    };
  },
  render: function() {
    var props = _.extend({
      onTouchStart: this._startPreview,
      onMouseOver:  this._startPreview,
      onTouchEnd:   this._endPreview,
      onTouchMove:  this._endPreview,
      onMouseOut:   this._endPreview
    }, this.props);
    props.className = (this.state.preview) ? this.props.previewClassName : "";
    delete props.previewClassName;
    return React.DOM.span(props, this.props.children);
  },
  _startPreview: function(e) {
    this.setState({
      preview: true
    });
  },
  _endPreview: function(e) {
    this.setState({
      preview: false
    });
  }
});

Example of use would be nice! :)