JSFiddle - React, Tailwind, and code Playground

by Hemanth HM

HTML

<script src="https://muut.com/riotjs/dist/demo/js/riot.js"></script>
<title>RIOT example</title>
<timetable>
    <timer start="0"></timer>
    <timer start="10"></timer>
    <timer start="20"></timer>
</timetable>

JavaScript

riot.tag('timer', '<p>Seconds Elapsed: { time }</p>', function (opts) {
    this.time = opts.start || 0;

    this.tick = (function () {
        this.update({
            time: ++this.time
        });
    }).bind(this);

    var timer = setInterval(this.tick, 1000);

    this.on('unmount', function () {
        console.info('timer cleared');
        clearInterval(timer);
    });
});

riot.mount('timer', {
    start: 0
});