Grid Layout for Tweets inside TwitterTimelineEmbed

Viewed 118

I'm using react-twitter-embed to display a timeline in a home page. But I would like to add a custom CSS grid (the tweets, limited by six, must appear horizontally and not vertically): Vertical Twitter Timeline

import { useTranslation } from "react-i18next";
import { TwitterTimelineEmbed } from "react-twitter-embed";
import { FollowUsOn } from "../Footer/SubModules/FollowUs/follow-us-on.component";
import { BlockTwitterBtn } from "./SubModules/block-twitter-btn.component";

export const BlockTwitter = () => {
  const { t } = useTranslation();

  return (
    <div className="container blockTwitter">
      <div className="blockTwitter__firstCard">
        <h3 className="blockTwitter__title">{t("common:blockTwitterTitle")}</h3>
        <BlockTwitterBtn />
        <FollowUsOn />
      </div>
      <section className="twitterContainer">
        <div className="twitter-embed">
          <TwitterTimelineEmbed
            sourceType="profile"
            screenName="Quebecor"
            options={{
              tweetLimit: "6",
              width: "100%",
              height: "100%"
            }}
            noHeader="true"
            noFooter="true"
          ></TwitterTimelineEmbed>
        </div>
      </section>
    </div>
  );
};

I read I could use the option onLoad={function with custom CSS}, but I don't know exactly how to do this on React...

0 Answers
Related