JSFiddle - React, Tailwind, and code Playground

Twitter Post Fetcher v10.0

by Jennifer Perrin

HTML

<a id="linkage" href="http://www.jasonmayes.com/projects/twitterApi/" target="_blank">Visit my website</a>

 <h2>Query 1: My latest tweet</h2>

<div id="example1"></div>
 <h2>Query 2: What people are saying about this component!</h2>

<div id="example2"></div>
 <h2>Query 3: Last 3 Twitter posts using hastag #API</h2>

<div id="example3"></div>
 <h2>Query 4: Last 3 Twitter posts using hastag #API with custom callback</h2>

<div id="example4"></div>

CSS

/* 
* Example style!
* You can do whatever the hell you want on your site :-)
*/
 h2 {
    clear:both;
}
p, a {
    font-size:9pt;
    margin:10px 0 0 0;
    color:#3d3d3d;
}
a, a:visited {
    color:#427fed;
}
a:hover {
    color:#82afff;
}
ul li {
    list-style:none;
    overflow:hidden;
    border:1px solid #dedede;
    margin:5px;
    padding:5px;
}
ul li:hover {
    background-color:#f0f3fb;
}
.user, .tweet, .timePosted {
    float:left;
}
.user {
    width:25%;
}
.tweet {
    width:50%;
}
.timePosted {
    width:15%;
}
.user {
    clear:left;
}
.user a {
    width: 100px;
}
.user span span {
    width:100px;
    display:block;
    margin-top:10px;
}
.user img, .user a > span {
    float:left;
}
.interact {
    float:left;
    width:10%;
    margin-top:-7px;
}
.interact a {
    margin-left:5px;
    float:left;
}
.user a > span {
    margin-left:10px;
}
#linkage {
    position:fixed;
    top:0px;
    right:0px;
    background-color:#3d3d3d;
    color:#ffffff;
    text-decoration:none;
    padding:5px;
    width:10%;
    font-family:arial;
}

JavaScript

/*********************************************************************
 *  #### Twitter Post Fetcher v10.0 ####
 *  Coded by Jason Mayes 2013. A present to all the developers out there.
 *  www.jasonmayes.com
 *  Please keep this disclaimer with my code if you use it. Thanks. :-)
 *  Got feedback or questions, ask here:
 *  http://www.jasonmayes.com/projects/twitterApi/
 *  Updates will be posted to this site.
 *********************************************************************/
var twitterFetcher = function () {
    function x(e) {
        return e.replace(/<b[^>]*>(.*?)<\/b>/gi, function (c, e) {
            return e
        }).replace(/class=".*?"|data-query-source=".*?"|dir=".*?"|rel=".*?"/gi, "")
    }
    function p(e, c) {
        for (var g = [], f = RegExp("(^| )" + c + "( |$)"), a = e.getElementsByTagName("*"), h = 0, d = a.length; h < d; h++) f.test(a[h].className) && g.push(a[h]);
        return g
    }
    var y = "",
        l = 20,
        s = !0,
        k = [],
        t = !1,
        q = !0,
        r = !0,
        u = null,
        v = !0,
        z = !0,
        w = null,
        A = !0;
    return {
        fetch: function (e, c, g, f, a, h, d, b, m, n) {
            void 0 === g && (g = 20);
            void 0 === f && (s = !0);
            void 0 === a && (a = !0);
            void 0 === h && (h = !0);
            void 0 === d && (d = "default");
            void 0 === b && (b = !0);
            void 0 === m && (m = null);
            void 0 === n && (n = !0);
            t ? k.push({
                id: e,
                domId: c,
                maxTweets: g,
                enableLinks: f,
                showUser: a,
                showTime: h,
                dateFunction: d,
                showRt: b,
                customCallback: m,
                showInteraction: n
            }) : (t = !0, y = c, l = g, s = f, r = a, q = h, z = b, u = d, w = m, A = n, c = document.createElement("script"), c.type = "text/javascript", c.src =...