React (create-react-app) and using twitter tweet button widget?

Hi FCC,

I am currently working on a project using react/node/mongo. I want to use the twitter widget to include an easy way for users to tweet out from my site.

I am trying to load the widget using the script tag as outlined on twitter’s site:

<script>window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);

  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };

  return t;
}(document, "script", "twitter-wjs"));</script>

This tag is placed in my <head> section of my index.html file (which is the main entry point for the app (I used create-react-app to generate the project skeleton).

What’s curious is when the page with the twitter button renders, the “Tweet” text appears without any styling on the button itself. (it isn’t blue, there is no height/width). What’s even more strange is RARELY it will appear styled correctly (blue background, twitter bird icon on the button, etc). This leads me to think there is some kind of race condition that I am not accommodating for?

Does anyone have any experience using React (specifically create-react-app) and Twitter’s tweet button?

Any help is appreciated.

Thanks!

Hi SkyC,

An issue I am running into is that twttr is undefined in my component. Do you know of any way I can pass the twttr instance into the component I need to use it in?

Yeah I’ve tried accessing in in componentDidMount() but it did not work.

Not sure :confounded:!

Think i fixed it by accessing through window obj.

ie window.twttr.widgets.load()

if anyone is curious / has this issue in the future

2 Likes

Finally the solution. Thanks a lot.