Add Twitter timeline in ReactJS

• Go to https://publish.twitter.com to get the embed code.

• Copy the embed code

The embed code will look like this

• Goto index.html in your public folder in your ReactJS app. I assume you created the app via CRA

• Cut the script tag from the embed code inside your head tag in index.html
• Now we have only the first line that’s the anchor (“a”) tag.
• Added the anchor tag in you component wherever you need to show it.

Now we need to load the twitter embed code.

Do this to load twitter embed code

For Class component

componentDidMount: function() {
      window.twttr &&
      window.twttr.widgets &&
      typeof window.twttr.widgets.load === "function" &&
      window.twttr.widgets.load();
}

For Functional component, use the useLayoutEffect hook

  useLayoutEffect(() => {
      window.twttr &&
      window.twttr.widgets &&
      typeof window.twttr.widgets.load === "function" &&
      window.twttr.widgets.load();
  });

Happy coding 🍺