JSFiddle - React, Tailwind, and code Playground

by Ali Uygur

HTML

<script src="http://markserbol.github.io/urlive/jquery.urlive.js"></script>
<link rel="stylesheet" href="http://markserbol.github.io/urlive/jquery.urlive.css">
<textarea placeholder="input a URL here">
http://www.mintik.com/?p=21822
</textarea>
<div class="urlive-container"> 
    <span class="loading">Loading...</span>
</div>

CSS

* {
    font-family:'Segoe UI', 'Open Sans', sans-serif;
}
textarea {
    width:450px;
    height:70px;
}
.urlive-container {
    margin-top:15px;
    width:450px;
    padding:0 0 50px 0;
}
.loading {
    display:none;
}

JavaScript

$('textarea').on('input propertychange', function () {
     $('textarea').urlive({
        callbacks: {
            onStart: function () {
                $('.loading').show();
                $('.urlive-container').urlive('remove');
            },
            onSuccess: function (data) {
                $('.loading').hide();
                $('.urlive-container').urlive('remove');
            },
            noData: function () {
                $('.loading').hide();
            }
        }
    });
}).trigger('input');