Skip to content

Instantly share code, notes, and snippets.

@makenosound

makenosound/jsx.html

Created Jun 19, 2014
Embed
What would you like to do?
Touch preview
<!-- Pretend this is a JSX block -->
<div>
<TouchPreview previewClassName="link--preview">
<a href="/foo">
Hello
</a>
</TouchPreview>
</div>
a {
color: blue;
}
.link--preview a {
color: red;
text-decoration: underline;
}
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
});
}
});
@abergs

This comment has been minimized.

Copy link

@abergs abergs commented Jul 28, 2014

Example of use would be nice! :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.