JSFiddle - React, Tailwind, and code Playground

by anthonyshort

HTML

<script src="https://rawgithub.com/ripplejs/ripple/master/dist/ripple.min.js"></script>
<script src="https://rawgithub.com/ripplejs/events/master/dist/ripple-events.min.js"></script>
<script src="https://rawgithub.com/ripplejs/refs/master/dist/ripple-refs.min.js"></script>
<script src="https://rawgithub.com/ripplejs/markdown/master/dist/ripple-markdown.min.js"></script>

JavaScript

var View = ripple('<span>Seconds Elapsed: {{secondsElapsed}}</span>');

View.on('mounted', function(view){
  view.interval = setInterval(view.tick.bind(view), 1000);
});

View.on('unmounted', function(view){
  clearInterval(view.interval);
});

View.prototype.tick = function() {
  this.set('secondsElapsed', this.data.secondsElapsed + 1);
};

var view = new View({
  data: { 
    secondsElapsed: 0 
  }   
});

view.appendTo(document.body);