JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgit.com/aterrien/jQuery-Knob/master/dist/jquery.knob.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<div class="wrap">
<div id="knob"> </div>
</div>
CSS
body {
padding: 40px 0;
}
.wrap {
width: 200px;
height: 200px;
margin: 30px auto;
}
Babel + JSX
var Knob = React.createClass({
componentDidMount: function() {
var knob = React.findDOMNode(this.refs.knob);
this.$knob = $(knob).knob(this.props);
},
render: function() {
return (<input type="text" ref="knob" defaultValue={this.props.val}/>)
},
componentWillUpdate: function(newProps) {
this.$knob.trigger({configure: newProps});
}
});
var knobEl = document.getElementById("knob");
var countdown = 100;
var defaultOptions = {
min: 0,
max: 100,
fgColor: "#ff0000",
onChange: function(val) {
console.log('changed', val);
}
};
setInterval(function() {
React.render(<Knob val={countdown} {...defaultOptions} />, knobEl);
countdown--;
}, 1000);