React.js highlight on change component

index.jsx

var React = require("react");
var cx = require("classnames");
var _ = require("lodash");

require("./index.less");

var HighlightOnChange = React.createClass({
	propTypes: {
		subscribeTo: React.PropTypes.any.isRequired,
		component: React.PropTypes.any,
		highlightDuration: React.PropTypes.number
	},
	getDefaultProps() {
		return {
			component: 'span'
		};
	},
	getInitialState() {
		return {
			justChanged: false
		};
	},
	componentWillReceiveProps(next) {
		if (next.subscribeTo !== this.props.subscribeTo) {
			this.setState({
				justChanged: true
			});
			clearTimeout(this.coolOff);
			this.coolOff = setTimeout(function() {
				this.setState({
					justChanged: false
				});
			}.bind(this), this.props.highlightDuration || 200);
		}
	},
	render() {
		var classNames = cx({
			'highlight-no-change': !this.state.justChanged,
			'highlight-just-changed': this.state.justChanged
		});

		return React.createElement(this.props.component, _.extend({}, this.props, { className: classNames }), this.props.children);
	}
});

module.exports = HighlightOnChange;

index.less

var React = require("react");
var cx = require("classnames");
var _ = require("lodash");

require("./index.less");

var HighlightOnChange = React.createClass({
	propTypes: {
		subscribeTo: React.PropTypes.any.isRequired,
		component: React.PropTypes.any,
		highlightDuration: React.PropTypes.number
	},
	getDefaultProps() {
		return {
			component: 'span'
		};
	},
	getInitialState() {
		return {
			justChanged: false
		};
	},
	componentWillReceiveProps(next) {
		if (next.subscribeTo !== this.props.subscribeTo) {
			this.setState({
				justChanged: true
			});
			clearTimeout(this.coolOff);
			this.coolOff = setTimeout(function() {
				this.setState({
					justChanged: false
				});
			}.bind(this), this.props.highlightDuration || 200);
		}
	},
	render() {
		var classNames = cx({
			'highlight-no-change': !this.state.justChanged,
			'highlight-just-changed': this.state.justChanged
		});

		return React.createElement(this.props.component, _.extend({}, this.props, { className: classNames }), this.props.children);
	}
});

module.exports = HighlightOnChange;