DEV Community

Cover image for Embed Twitter widget on ReactJS
Mark Kop
Mark Kop

Posted on

14 4

Embed Twitter widget on ReactJS

I started doing my own web page and wanted to add some of my recent tweets on side of it.

Twitter has a tool which creates embedded widgets, however they don't work out of the box in JSX (React).

<!-- HTML code given by Twitter's Publish tool -->
<a
  class="twitter-timeline"
  href="https://twitter.com/HeyMarkKop?ref_src=twsrc%5Etfw"
>
  Tweets by HeyMarkKop
</a>
<script
  async
  src="https://platform.twitter.com/widgets.js"
  charset="utf-8"
></script>
Enter fullscreen mode Exit fullscreen mode

These are the following solutions I've found:

Adding script after mounting

Using native Javascript and useEffect React hook to append the script element after the component mount is our first option.

// TwitterContainer.js
import React, { useEffect } from "react";

const TwitterContainer = () => {
  useEffect(() => {
    const anchor = document.createElement("a");
    anchor.setAttribute("class", "twitter-timeline");
    anchor.setAttribute("data-theme", "dark");
    anchor.setAttribute("data-tweet-limit", "5");
    anchor.setAttribute("data-chrome", "noheader nofooter noborders");
    anchor.setAttribute("href", "https://twitter.com/HeyMarkKop");
    document.getElementsByClassName("twitter-embed")[0].appendChild(anchor);

    const script = document.createElement("script");
    script.setAttribute("src", "https://platform.twitter.com/widgets.js");
    document.getElementsByClassName("twitter-embed")[0].appendChild(script);
  }, []);

  return (
    <section className="twitterContainer">
      <div className="twitter-embed"></div>
    </section>
  );
};

export default TwitterContainer;
Enter fullscreen mode Exit fullscreen mode

Another way of coding it would be:

// TwitterContainer.js
import React, { useEffect } from "react";

const TwitterContainer = () => {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://platform.twitter.com/widgets.js";
    document.getElementsByClassName("twitter-embed")[0].appendChild(script);
  }, []);

  return (
    <section className="twitterContainer">
      <div className="twitter-embed">
        <a
          className="twitter-timeline"
          data-theme="dark"
          data-tweet-limit="5"
          data-chrome="noheader nofooter noborders"
          href="https://twitter.com/HeyMarkKop"
        >
          Tweets by HeyMarkKop
        </a>
      </div>
    </section>
  );
};

export default TwitterContainer;

Enter fullscreen mode Exit fullscreen mode

Using a React Component

Another solution is using react-twitter-embed library.

Here's one example:

// TwitterContainer.js
import React from "react";
import { TwitterTimelineEmbed } from "react-twitter-embed";

const TwitterContainer = () => {
  return (
    <section className="twitterContainer">
      <div className="twitter-embed">
        <TwitterTimelineEmbed
          sourceType="profile"
          screenName="HeyMarkKop"
          options={{
            tweetLimit: "10",
            width: "100%",
            height: "100%"
          }}
          theme="dark"
          noHeader="true"
          noBorders="true"
          noFooter="true"
        ></TwitterTimelineEmbed>
      </div>
    </section>
  );
};

export default TwitterContainer;

Enter fullscreen mode Exit fullscreen mode

Setting options

You migth follow the examples above to find out how to pass some options to the script, however here are some links with more information:

If it doesn't work

It's worth to note that I didn't find a way to disable twitter's tracking and therefore tweets don't appear with the browser tracking's protection enabled.

firefox tracking protection

Some useful references:

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (5)

Collapse
 
shaqdeff profile image
Shaquille Ndunda •

To anyone facing the no scrolling issue, just add a data-height attribute and you should be good. Worked for me. Timeline's scrollable now.

Image description

Collapse
 
jamaciansunrise profile image
Sub-vers •

I attempted the react-twitter-embed library and the second implementation with react useEffect. Unfortunately, the element does not scroll. Instead it appends tweets into a list, how can I make a timeline that scrolls within the element and not just a list that breaks the formatting of my page.

Collapse
 
wilmela profile image
Wilmela •

Thanks, This helped.

Collapse
 
hrrarya profile image
Hridoy Mozumder •

How can i use it with class based component? I am kind of stuck. ComponentDidMount is not updating the changes.

Collapse
 
ivana_croxcatto profile image
Ivana Croxcatto •

Thank you!! It worked perfectly for me. No scrolling, true, but I don't need it for my implementation.

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up