How to use Twitter embed in ReactJS

rubenrudov

Ruben Rudov

Posted on March 11, 2021

How to use Twitter embed in ReactJS

In this post, we'll look at how we use Twitter post and Twitter time-line embedding via ReactJS.

First of all, create a react project and then, run it on the localhost:

npx create-react-app my-app
cd my_app 
npm start
Enter fullscreen mode Exit fullscreen mode

Then, type in the "my_app" folder's terminal:

npm install --save react-twitter-embed
Enter fullscreen mode Exit fullscreen mode

Import the next at the top of App.js:

import { TwitterTweetEmbed, TwitterTimelineEmbed } from 'react-twitter-embed'

Enter fullscreen mode Exit fullscreen mode

Now, for displaying the user's profile time-line we'll add the next to our code:

<TwitterTimelineEmbed
          sourceType="profile"
          // The preferred screen name goes next: 
          screenName="WHO"
          // Style options goes here:
          options={{ height: 600 }}
/>
Enter fullscreen mode Exit fullscreen mode

Now, If we prefer to embed only 1 specific tweet, we'll do the next steps:
1) Go to the tweet and tap the "more options" button.
2) Tap on the "embed tweet button" and copy the tweet ID (the last section of the link it gives you on this website).
3) write the next in your code and change the tweet ID with your tweet ID:

<TwitterTweetEmbed 
        // Here goes your copied ID.
        tweetId={"1365778691414974470"} 
        // Style options goes here:
        optins={{width: "900px"}} 
/>

Enter fullscreen mode Exit fullscreen mode

Thanks for reading, for viewing the results you can click on the link: https://corona-web-ruby.firebaseapp.com/

For other open-source React and Android native development, you can go to my GitHub: https://github.com/rubenrudov

💖 💪 🙅 🚩
rubenrudov
Ruben Rudov

Posted on March 11, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related